1

I want to have a max-height div with scrollbars when the content goes beyond the max-height:

<div id="scrollable-div">A bunch of content that might be long.</div>

#scrollable-div {
  max-height: 50px;
  overflow: auto;
}

The problem is that this is not supported in older mobile browsers (such as Android < 3.0). So I want to use Modernizr to detect the overflow scrolling support, and fall back to no max-height when the support is not there (as suggested here: Android browser bug? div overflow scrolling):

#scrollable-div {
  max-height: 50px;
  overflow: auto;
}

.no-overflowscrolling #scrollable-div {
  max-height: none;    
}

However, Modernizr is adding the no-overflowscrolling class even in modern desktop browsers where I know that overflow: auto works. I've tested with Firefox 24.0, Chrome 30.0.1599.101, and Safari 6.0.5 (8536.30.1), and Modernizr adds no-overflowscrolling for each. Furthermore, Modernizr.overflowscrolling returns false in the javascript consoles.

I suspect there is something I'm not understanding here. Can somebody explain?

1 Answer 1

1

I figured out what I was not understanding. Modernizr's overflowscrolling test is for the -*-overflow-scrolling CSS property that some browsers implement. It is not a test for whether overflow:[auto|scroll] works in the browser. -webkit-overflow-scrolling is an additional css property that controls whether scrolling in iOS will have "momentum" like native iOS controls. It is obviously not supported in desktop browsers because it is a mobile-specific property; that's why Modernizr adds the no-overflowscrolling class.

overflowscrolling != support for overflow: scroll

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.