如何在Mobile Safari中显示滚动条？

Question

我编写的jQuery时间选择器插件使用div作为时间列表的包含块,而在Mobile Safari上没有滚动条表示可用时间多于可见时间.我知道用两个手指到div(在iPad上至少)内滚动,但是,只有当用户知道,有更多的内容,以滚动的作品来,而且也没有迹象表明存在.所以,我的问题是:有没有人能够在Mobile Safari中显示滚动条？你过得怎么样？

Answer 1

假设您使用的是iOS5.0或更高版本,我认为您必须使用以下内容:

-webkit-overflow-scrolling: auto (这是默认样式)

auto:单指滚动没有动量.

另一种可用的风格是

-webkit-overflow-scrolling: touch

touch:原生样式滚动.指定此样式具有创建放样上下文(如不透明度,蒙版和变换)的效果.

使用touch模式时,滚动条将在用户触摸和滚动时显示,但在不使用时会消失.如果你想让它始终可见,那么这篇旧帖子将帮助你:

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

@BJMC的另一段代码:

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

原始来源

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

对于演示(您已经描述过),这是通过onhover事件启动的,请检查我为此创建的这个小提琴.

这可以在桌面浏览器中重现结果,也可以在iPad中使用,只需添加定时器代码即可满足您的要求.

Answer 2

关于原始问题:拥有滚动条的最佳解决方案是使用外部库(已推荐iScroll很好,但即使是jQuery UI本身也包含滚动条).但是显示永远存在的滚动条可能会偏离一般的iOS UI(见下文).

替代方案是用其他GUI元素指示内容是可滚动的.考虑元素末尾的小梯度字段(内容淡入背景),表示内容在触摸和滚动时继续.

在iOS5中overflow: scroll按预期运行,即它允许div用一个手指在由尺寸指定的区域内向上/向下滚动div.但是可滚动的div没有滚动条.这与iOS(5)中的常规UI略有不同.通常也没有滚动条,但是当用户开始滚动内容区域并且在触摸事件停止后再次淡出时它们出现.

Answer 3

按照惯例，iOS 上不使用滚动条。

对于带有 的 div overflow: scroll，唯一的本地滚动方式是使用两根手指。

您可以看一下iScroll，这是一个 JavaScript 库，它处理触摸事件并为 div 实现单指动量滚动（用户通常在本机应用程序中期望）。