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

我编写的jQuery时间选择器插件使用div作为时间列表的包含块，在mobilesafari上没有滚动条指示可用时间多于可见时间。我知道用两个手指在div中滚动（至少在iPad上是这样），但只有当用户知道有更多的内容可以滚动，并且没有迹象表明有更多内容可以滚动时，这才有效。那么，我的问题是：有人能够在Mobile Safari中显示滚动条吗？你是怎么做到的？

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

对于具有

溢出：scroll

的div，唯一的本机滚动方式是使用两个手指

---

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

在ios5之前，您无法滚动内部div-因此，当您尝试滚动时，可能看不到滚动条，因为没有滚动条

我还没有在ios5上测试过，但现在应该可以滚动内部div了

---

如果它不是一个内部div，那么当它只滚动时，你应该能够看到滚动条-这不再只是在ios上-lion也摆脱了所有本地滚动条。只有在窗口滚动或首次加载窗口时才能看到滚动条。

关于最初的问题：使用滚动条的最佳解决方案是使用外部库（已经推荐的iScroll很好，但甚至可以）。但是显示经常出现的滚动条可能会与一般的iOS用户界面有所不同（见下文）

另一种方法是使用其他GUI元素指示内容是可滚动的。考虑元素结尾处的小梯度字段（内容消失到背景），这意味着当触摸和滚动时内容继续。

---

在iOS5

overflow中：滚动

按预期工作，即允许在

div

尺寸指定的区域内用一个手指上下滚动

div

。但是可滚动div没有滚动条。这与iOS（5）中的常规UI有些不同。通常也没有滚动条，但当用户开始滚动内容区域时，滚动条会出现，触摸事件停止后，滚动条会再次消失。

据我所知，Mobile safari不支持滚动条。 我能找到的最好的插件是

它的演示是可用的。 它还具有多个功能以适合您的应用程序

这是你将得到的样品-

---

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

-webkit溢出滚动：自动

（这是默认样式）

自动：一个手指在没有动力的情况下滚动

另一种可用的样式是

-webkit溢出滚动：触摸

触摸：本机风格的滚动。指定此样式具有创建锁定上下文（如不透明度、遮罩和变换）的效果

使用

touch

模式，当用户触摸和滚动时滚动条将可见，但不使用时滚动条将消失。如果要使其始终可见，则这将有助于您：

::-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);
}

编辑：关于行为，您应该使用jQuery，因为它会给您很大帮助，

$（document.ready（function（）{//your code with timer}）

code with timer需要在所需时间（比如5秒）后将CSS属性重置为正常

对于演示（如您所述），这是通过

onhover

事件启动的，请检查我为此创建的这个

---

这将在桌面浏览器中复制结果，在iPad中也可以使用，只需添加您的计时器代码即可满足您的要求。

回答上面Sam Hasler的评论。 是一个jquery插件，它可以实现您想要的淡入/淡出效果，并且可以在所有主要的移动/平板/桌面浏览器中使用

代码：

---

如果希望滚动条始终可见

不要设置

-webkit溢出滚动：触摸

然后为滚动条设置自定义样式

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

你会失去动量效应，但滚动条会一直存在

（在iPhone 4／iOS 7下测试）
您可能还想考虑一种不同的方法来向用户显示更多内容，比如显示被切断的东西，或者箭头……这是iOS5吗？您正在谈论您需要添加高度：8px顶部答案”。我正在寻找一种方法，使其行为类似于iOS select弹出窗口，其中滚动条最初显示，然后逐渐消失。所以你知道它是可滚动的，但它会挡道。我想我可以在加载时添加一个类来应用：：-webkit滚动条规则，并使用css转换将其淡出。我在div上有
-webkit溢出滚动：触摸
，直到我开始滚动，我才看到滚动条。用户代理切换器？你是说你还没有在真正的iPad/iPhone上测试过这一点，因为这是了解它在iOS上表现的唯一方法。你试过添加这个片段吗？：：-webkit滚动条拇指{边框半径：4px；背景颜色：rgba（0,0,0,5）；-webkit盒阴影：0 0 1px rgba（255255255,5）；}我已经在iPad上测试了上述内容，但它没有按要求工作。使用UA切换测试布局和javascript UA嗅探是可以的，但是当涉及到测试实际的浏览器行为时，您必须在目标设备上进行实际测试。此外，Chrome开发工具现在内置了用户代理切换功能。这就是如何创建兼容性表的方法@SamHasler我的答案不让你满意有什么原因吗，也许我可以帮你？我对这个答案投了更高的票，因为它确实解决了问题，但它是一个插件，我将作为一个（大3000+LOC）依赖项，而不是几行
::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}