Android browser bug? div overflow scrolling

Question

Can you make the overflow content of a div scrollable in the Android browser?

It is scrollable in all other modern browsers.

In iOS it is scrollable - however it does not show scrollbars - but it is scrollable via dragging.

A simple example: http://jsfiddle.net/KPuW5/1/embedded/result/

Will this be fixed soon?

Answer 1

Android 3.0 and higher have support for overflow:scroll, on < 3.0 it's another story. You might have some success with polyfills like iScroll, however that does come at a cost. It's difficult to implement on sites with complex layouts, and you need to a call a method everytime the content on your site changes. Memory use is also an issue: on already underpowered devices performance may lag because of these kinds of polyfills.

I would recommend a different approach: use Modernizr to detect support for overflow scrolling , add a class to your html tag and use that to rewrite your CSS so that pages scroll 'normally' instead of in a box.

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}

Answer 2

overflow: scroll; is supported as of Android 3 (API 11).

For a cross-platform (namely iOS <=4.3.2) Cubiq iScroll is an easy-to-implement fix.

Answer 3

You could try touchscoll.js for scrollable div elements