Android浏览器bug？ div溢出滚动

Question

你可以在Android浏览器中使div的溢出内容可滚动吗？

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

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

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

这会很快修好吗？

Answer 1

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

Answer 2

overflow: scroll; 从Android 3（API 11）开始支持。

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

Answer 3

您可以尝试touchscoll.js用于可滚动的div元素

Answer 4

只是为了完整性：

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

你可以通过添加样式来使它们可见：

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

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

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

Answer 5

您可以通过在CSS中定义滚动条的样式，在Android中滚动DIV。 本文将向您展示如何执行此操作： http ： //css-tricks.com/custom-scrollbars-in-webkit/