30

你能让一个 div 的溢出内容在 Android 浏览器中滚动吗？

它可以在所有其他现代浏览器中滚动。

在 iOS 中它是可滚动的——但它不显示滚动条——但它可以通过拖动来滚动。

一个简单的例子：http: //jsfiddle.net/KPuW5/1/embedded/result/

这会很快解决吗？

4

5 回答 5

25

Android 3.0 及更高版本支持overflow:scroll, 在 < 3.0 上是另一回事。使用 iScroll 之类的 polyfill 可能会取得一些成功，但这确实是有代价的。在布局复杂的网站上很难实现，每次网站内容发生变化时都需要调用一个方法。内存使用也是一个问题：在已经功率不足的设备上，由于这些类型的 polyfill，性能可能会滞后。

我会推荐一种不同的方法：使用 Modernizr 来检测对溢出滚动的支持，向您的html标签添加一个类并使用它来重写您的 CSS，以便页面“正常”滚动而不是在一个框中滚动。

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

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}
于 2012-11-14T13:07:27.173 回答
8

overflow: scroll;从 Android 3 (API 11) 开始支持。

对于跨平台（即 iOS <=4.3.2）Cubiq iScroll是一个易于实现的修复程序。

于 2012-08-16T05:52:21.447 回答
3

您可以尝试使用 touchscoll.js获取可滚动的 div 元素

于 2012-05-20T18:26:51.053 回答
0

只是为了完整性：

滚动条实际上​​是在 Android 2.3 中存在的，但是它们非常有问题，并且默认情况下它们的样式设置为 0 宽度，因此它们是不可见的。

您可以通过添加如下样式使它们可见：

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

但是，拇指元素不可拖动，您只能通过点击其下方或上方的轨道来移动它。

此外，这些样式会改变所有 webkit 浏览器中滚动条的外观，因此最好添加一个仅适用于 Android 2.3 的类。

于 2014-07-31T14:03:26.423 回答
-5

您可以通过在 CSS 中定义滚动条的样式来使 DIV 在 Android 中可滚动。本文向您展示如何做到这一点： http ://css-tricks.com/custom-scrollbars-in-webkit/

于 2012-08-30T21:14:22.047 回答