CSS Scrollbar detection Modernizr plugin

gistfile1.js

// 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;
});

You'll need a ­ 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(',')

:)

Should be ok now :)

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

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!

Now over at: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css-scrollbars.js