如何使滚动条显示在Mobile Safari中? [英] How do I get scrollbars to show in Mobile Safari?

问题描述

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

The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?

推荐答案

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

Assuming you are using iOS5.0 or later, I think you have to use the following:

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

自动:一根手指没有动量地滚动.

其他可用样式是

-webkit-overflow-scrolling: touch

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

使用touch模式，滚动条在用户触摸和滚动时将可见，但在不使用时将消失.如果您想使其始终显示为 ，则此 旧帖子 将为您提供帮助:

Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:

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

@BJMC编写的Thumb的另一段代码:

Another Piece of Code for Thumb by @BJMC:

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

原始来源

编辑:关于此演示的行为，您应该使用jQuery是因为它会为您带来很多帮助，带有计时器的$(document).ready(function(){//your code with timer})代码将需要在期望的时间(例如5秒钟)后将CSS属性重置为正常状态.

with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)

对于演示(您已描述)，该演示是通过onhover事件启动的，请检查此 fiddle 我为此创建的.

For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.

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

That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.

这篇关于如何使滚动条显示在Mobile Safari中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！