public
Last active

Modernizr Test 'overflow-scrolling'

  • Download Gist
modernizr_overflowscrolling.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
Modernizr.addTest('overflowscrolling', function(){
return Modernizr.testAllProps("overflowScrolling");
});
 
//developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling
 
 
 
 
/* slower but more specific test for overflow-scrolling:touch; */
 
var testProp = "overflow-scrolling";
var testVal = "touch";
var styles = Modernizr._prefixes.join(testProp + ":" + testVal + "; ");
 
Modernizr.testStyles('#modernizr { '+styles+' }', function(elem, rule){
var bool = false;
 
for(var i = 0; i < Modernizr._prefixes.length; i++) {
var bool = (window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)[Modernizr._prefixes[i] + testProp] == testVal;
 
if(bool) break;
}
 
Modernizr.addTest('overflowscrolling', bool);
});

Feature Detection Test for overflow-scrolling. Introduced with iOS5 to set the behavior of scrollable elements.

Use this test to decide if your need a library to get overflow:scroll; working on iOS - with just one finger...

This should only work in Modernizr 2.0+, correct?

yup. and with a few things checked under Exgtensisbility int he builder

This test doesn't seem to work in Chrome or Firefox. Any luck devising a test that works in all browsers?

For those looking for a non-Modernizr vanilla js approach, try this gist:

https://gist.github.com/4032527

the elaborate 'touch' version above returned true on my ie9 desktop browser ?

if you are fine with only a webkit test, this seems to work to detect overflow-scrolling:touch

Modernizr.testStyles('#modernizr { -webkit-overflow-scrolling:touch }', function(elem, rule) {
        Modernizr.addTest(
              'overflowtouch', 
              window.getComputedStyle&&window.getComputedStyle(elem).getPropertyValue('-webkit-overflow-scrolling') == 'touch'
        );
 });

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.