安卓浏览器漏洞？ div溢出滚动

Posted 2023-02-22

【中文标题】安卓浏览器漏洞？ div溢出滚动

【英文标题】：Android browser bug? div overflow scrolling

【发布时间】：2011-12-22 05:29:08

【问题描述】：

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

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

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

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

这会很快解决吗？

【问题讨论】：

这是一个错误：code.google.com/p/android/issues/detail?id=6864 有几种解决方法：cubiq.org/iscroll-4 而不是这些黑客 - 这个错误应该被修复，围绕 html 的所有炒作我很惊讶它有多糟糕已实施。

这似乎现在已修复。一些 SDK 没有最新的 webviews，但仍然存在这个问题

【参考方案1】：

Android 3.0 及更高版本支持overflow:scroll，在

我会推荐一种不同的方法：使用 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;

【讨论】：

我认为您推荐的方法是基于一种误解。 Modernizr 的overflowscrolling 测试不是看overflow:scroll 在浏览器中是否有效，而是浏览器是否支持*-overflow-scrolling css 属性，这是不同的。

【参考方案2】：

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

对于跨平台（即 iOS Cubiq iScroll 是一个易于实施的修复程序。

【参考方案3】：

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

【参考方案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 的类。

【参考方案5】：

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

【讨论】：

您能否在此处包含一个简短的示例，以防止在该链接失效时/当该链接失效时此答案变得无用？

这确实在 Android 2.3 上显示滚动条，但不会使 div 可滚动:(

Husky，我在 Android 2.3 上试用它，它可以工作。也许行为在不同的设备中有所不同。试试这个 webapp：applications.frenys.com/webapp/?ref=dl&app=116815031665454（你必须触摸/点击滚动条轨道的空白部分）

@juamp 这如何回答这个问题？