如何在安卓浏览器中制作滚动条答案

【问题标题】：How to make scrollbars in android browsers如何在安卓浏览器中制作滚动条
【发布时间】：2012-03-29 16:49:22
【问题描述】：

如何在android浏览器中使用overflow-y，例如在opera mobile中？如果我创建一个具有溢出-y 样式的 div，那么它将无法正常工作，就像在桌面浏览器中一样。

所以我想制作可垂直滚动的 div，而不使用任何库。请给我一些指示。

提前致谢，

【问题讨论】：

标签： javascript css overflow android-browser opera-mobile

【解决方案1】：

制作两个 div：

<div class='parent-of-scroller'>
    <div class='scrollable-item'>
        ... your content ... 
    </div>
</div>

对于外部div，设置overflow:hidden通过使用javascript管理内部div的margin-top来控制滚动位置的放置。我相信你可以利用触摸事件来控制内部div的滚动位置

【讨论】：

这里有同样的问题 - 但不了解所有的解决方案。你如何“使用javascript管理它的margin-top”？
通过管理margin-top，我的意思是改变它的整数值。您可以取消它以向上滚动（低于零）和相反的方式。您将有一些事件，您希望在该事件下滚动该部分以及确定您想要滚动多少的像素数 (xx)。使用element.style.marginLeft="xx";

【解决方案2】：

对于未来的后代，您在问题中标记的浏览器 Opera Mobile 12/Classic 具有非常具体的标准，必须遵循这些标准才能使 overflow: scroll 或 overflow: auto 正常工作：

单独的元素高度（或宽度）不足以让 Opera Mobile 12 溢出一个元素，并且它会扩展元素，除非使用顶部和底部值绝对定位。这很糟糕，但是当绝对定位时，Opera Mobile 12 确实为溢出元素添加了一个滚动条，但不支持触摸手势滚动，并且滚动条控件很不稳定。

因此，要让 Opera Mobile实际上添加滚动条并溢出 div，您需要稍微修改 Kishu 的示例：

<style>
#parent-of-scroller {
  position: relative;
  height: [whatever]
}
#scrollable-item {
  position: absolute;
  top: 0px;
  bottom: 0px;
}
</style>

<div class='parent-of-scroller'>
    <div class='scrollable-item'>
        ... your content ... 
    </div>
</div>

Opera ≥9.5 CSS hack _:-o-prefocus, body:last-child .your-selector-here 可能会对您有所帮助。

来自http://barrow.io/overflow-scrolling

【讨论】：