CODEWITHSUNDEEP
javascriptmobilescrollmedia-queriesmodernizr
Pointy
Pointy

Reputation: 413737

Detect whether "overflow: auto" works properly (mobile browsers)

I'd like to detect in some "nice" way (Modernizr most likely, but whatever) whether a layout should have embedded scrollable regions of the page, or else (for some mobile use) should just flow all content as one scrollable mass.

The specific case is a "EULA"-like page, where there's a form with an "I ACCEPT" button or whatever, and then a mass of hideous all-caps legal stuff. On a big screen I'd like the whole form visible, so I'd like to put the legal stuff in its own scrolling box. However, on a mobile device that would be kind-of ugly (though I'm no mobile ux expert), so I was thinking of just dropping it all in-line so that the user could read the text (LOL) with simple swipes to scroll, and then at the bottom the buttons would scroll into view.

I suppose I could just check for touch with Modernizr, but that doesn't seem quite right.

edit — though I'm pretty sure that what I described would probably be a usability win anyway, the thing is I'm finding that my Android devices won't pay any attention to "overflow: auto" on a <div> in the middle of a page.

Upvotes: 1

Views: 1619

Answers (2)

ourmaninamsterdam
ourmaninamsterdam

Reputation: 2452

As others have said, the Modernizr.overflowscrolling checks for the overflow-scrolling css property, not for whether the device can scroll content within a div using overflow: auto.

In fact, in my recent testing, the Nexus 5 actually returns Modernizr.overflowscrolling as false, so it cannot be relied on.

This very small script (with no dependencies) seems to enable touch scrolling for devices (Android 2.3) lacking support... http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Link to repo: https://github.com/chrismbarr/TouchScroll

Upvotes: 1

Trott
Trott

Reputation: 70075

The approach I've taken is to rely on Modernizr.touch and Modernizr.overflowscrolling tests. If Modernizr inserts the touch and no-overflowscrolling classes in the html element in the DOM (or just check Modernizr.touch and Modernizr.overflowscrolling directly), then I avoid overflow:auto. This means that Android devices that mishandle overflow:auto do not get it.

This might be an imperfect solution; there might be devices that can handle overflow:auto that don't get it in this case. But that's not exactly the end of the world, at least in my case. And it seems to work correctly for all the most common devices/browsers.

And it has the virtue of being simple. I already had Modernizr loaded for other uses.

Upvotes: 2

Related Questions