Android browser bug? div overflow scrolling

问题

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?

回答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;
}

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

回答3:

You could try touchscoll.js for scrollable div elements

回答4:

Just for completeness:

The scrollbars are actually there in Android 2.3, but they are very buggy and by default they are styled to have 0 width, so they are invisible.

You can make them visible by adding styling like:

::-webkit-scrollbar {
    width: 30px;
}
::-webkit-scrollbar-track {
    background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
    background-color: $lightgrey;
}

However, the thumb element is not draggable, you can only move it by tapping the track underneath or above it.

Also, these styles will change the look of your scrollbars in all webkit browsers, so best you should add a class that only applies to Android 2.3.

回答5:

You can make a DIV scrollable in Android by defining the styles of the scrollbar in your CSS. This article show you how to do it: http://css-tricks.com/custom-scrollbars-in-webkit/

来源：https://stackoverflow.com/questions/8013204/android-browser-bug-div-overflow-scrolling

标签

android

html

android-browser