Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Modernizr Test 'overflow-scrolling'
Modernizr.addTest('overflowscrolling', function(){
return Modernizr.testAllProps("overflowScrolling");
/* 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);

helgri commented Oct 17, 2011

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...

dubilla commented Dec 16, 2011

This should only work in Modernizr 2.0+, correct?

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

mblase75 commented Oct 2, 2012

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

hay commented Nov 7, 2012

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

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) {
              window.getComputedStyle&&window.getComputedStyle(elem).getPropertyValue('-webkit-overflow-scrolling') == 'touch'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment