mobile-safari - 如何让滚动条显示在 Mobile Safari 中？

Question

我编写的 jQuery 时间选择器插件使用 div 作为时间列表的包含 block ，并且在 Mobile Safari 上没有滚动条来指示可用时间多于可见时间。我知道使用两根手指在 div 内滚动(至少在 iPad 上)，但这只有在用户知道有更多内容要滚动到并且没有迹象表明存在时才有效。所以，我的问题是:有没有人能够让滚动条显示在 Mobile Safari 中？你是怎么做到的？

Answer 1

假设您使用的是iOS5.0或更高版本，我认为您必须使用以下内容:
-webkit-overflow-scrolling: auto (这是默认样式)

auto:一根手指滚动，没有动量。

另一种可用的样式是
-webkit-overflow-scrolling: touch
touch:原生风格的滚动。指定此样式具有创建赌注上下文的效果(如不透明度、蒙版和变换)。

使用 touch模式下，滚动条在用户触摸和滚动时可见，但在不使用时消失。如果你想让它始终可见，那么 old post会帮助你:

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}

@BJMC 的另一段 Thumb 代码:

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Original Source

编辑:关于 this demo's行为，你应该使用 jQuery，因为它会帮助你很多， $(document).ready(function(){//your code with timer})带有计时器的代码需要在所需时间后将 CSS 属性重置为正常(比如说 5 秒。)

对于演示(您所描述的)，这是使用 onhover 启动的。事件，请查看 fiddle我为此创造了。

这可以在桌面浏览器中重现结果，并且也可以在 iPad 上运行，只需添加您的计时器代码以满足您的要求。