移动端网页嵌套一个div，需要滚动条，但是在移动端浏览器上面没办法滚的问题

最新推荐文章于 2024-08-07 20:54:19 发布

码农下的天桥

最新推荐文章于 2024-08-07 20:54:19 发布

阅读量1.8w

点赞数

这里不是点名，但是假如各位在安卓机子（即使是安卓4）下面用过qq浏览器，那么标题这个bug就很明显了。

下面就是各种解决方案。

Android browser bug? div overflow scrolling

up vote 22 down vote favorite

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?

asked Nov 4 '11 at 17:10

mercador
315 1 2 12

It is a bug: code.google.com/p/android/issues/detail?id=6864 There are several work-arounds:cubiq.org/iscroll-4 Rather than these hacks - the bug should be fixed, with all the hype around HTML I am surprised how poorly it is implemented. – mercador Nov 4 '11 at 18:49

add a comment

5 Answers

active oldest votes

up vote 19 down vote

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

answered Nov 14 '12 at 13:07

Husky
2,429 19 26

I think your recommended approach is based on a misconception. Modernizr's overflowscrolling test is not for whether overflow:scroll works in the browser, but whether the browser has support for the *-overflow-scrolling css property, which is different. – speedarius Nov 15 '13 at 22:13

add a comment

up vote 5 down vote

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.

answered Aug 16 '12 at 5:52

Alastair
2,085 14 17

add a comment

up vote 3 down vote

You could try touchscoll.js for scrollable div elements

answered May 20 '12 at 18:26

Joe Antonetti
72 3

add a comment

up vote 0 down vote

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.

answered Jul 31 '14 at 14:03

evami
145 6

add a comment

up vote -5 down vote

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/

answered Aug 30 '12 at 21:14

juamp
1

Could you include a short sample here, to prevent this answer from becoming useless if/when that link goes dead? – Andrew Barber♦ Oct 2 '12 at 13:48

This does indeed show scrollbars on Android 2.3, but doesn't make the div scrollable :( – Husky Oct 2 '12 at 13:57

Husky, I try it on an Android 2.3 and it works. Maybe behavior varies in different devices. Try with this webapp: applications.frenys.com/webapp/?ref=dl&app=116815031665454 (you must touch/click on the empty part of the scrollbar track) – juamp Oct 19 '12 at 14:57

@juamp How does this answer the question? – hitautodestruct Jan 20 '13 at 21:00

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficientreputation you will be able to comment on any post. – chintan khetiya Sep 30 '13 at 12:31