Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Scrollbar detection Modernizr plugin
// Works only with Modernizr 1.8pre+
Modernizr.addTest('cssscrollbar', function() {
// Tested Element
var test = document.createElement('div'),
// Fake body
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}()),
property = 'scrollbar{width:0px;}';
// Force scrollbar
test.id = '__sb';
test.style.overflow = 'scroll';
test.style.width = '40px';
// Apply scrollbar style for all vendors
test.innerHTML = '&shy;<style>#'+Modernizr._prefixes.join(property+' #__sb::').split('#').slice(1).join('#')+property+'</style>';
root.appendChild(test);
// If css scrollbar is supported, than the scrollWidth should not be impacted
var ret = test.scrollWidth == 40;
// Cleaning
document.body.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
@paulirish

This comment has been minimized.

Copy link

paulirish commented Apr 29, 2011

You'll need a &shy; before the <style tag.

Also i have a sneaking suspicion that putting all the :: selectors on one line wont work. similarly to how ::selection has to be done multiple times. If that is the case then we'll need to loop.

And... instead of slice(11) do this .split(',').slice(1).join(',')

:)

@ZeeAgency

This comment has been minimized.

Copy link
Owner Author

ZeeAgency commented Apr 29, 2011

Should be ok now :)

@musicaldoctor

This comment has been minimized.

Copy link

musicaldoctor commented Oct 17, 2011

sorry guys, but is this supposed to be a test for the new iOS5 feature of overflow scroll on mobile safari? (http://goo.gl/D2XGW)
Because i'm not getting any differences between iOS5 and iOS4... It always says it's got css scroll

@paulirish

This comment has been minimized.

Copy link

paulirish commented Oct 17, 2011

nope. this is for the ability to style scrollbars.

@ZeeAgency can you give us a pull request for this in the modernizr feature-detects/ folder? thanks!

@paulirish

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.