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?

Community
  • 1
  • 1
speedarius
  • 1,006
  • 1
  • 8
  • 15

1 Answers1

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

speedarius
  • 1,006
  • 1
  • 8
  • 15