如何在移动版Safari中显示滚动条？

Question

我编写的jQuery时间选择插件使用一个div作为时间列表的容器，在移动Safari上没有滚动条来指示可用的时间比可见的更多。我知道在iPad上可以使用两个手指在div中滚动，但前提是用户知道有更多的内容需要滚动到，而且没有任何指示。因此，我的问题是：是否有人能够在Mobile Safari中显示滚动条？你是如何做到的？

- Daniel Cotter

---

您可能还想考虑一种不同的方法来向用户展示更多内容，比如显示被截断的内容或箭头等。 - mb21

你说的是iOS5吗？ - MarmiK

如果您想显示水平滚动条，您需要在顶部答案中添加 height: 8px;。 - Utku

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编写的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})代码和计时器后，需要在期望的时间（比如5秒）后将CSS属性重置为正常状态。

对于你所描述的演示，它是通过onhover事件启动的，请查看我为此创建的fiddle。

这在桌面浏览器中可以复现结果，并且也适用于iPad，只需添加你的计时器代码以满足你的需求即可。

- MarmiK

---

我正在寻找一种方法，使其表现得像iOS选择弹出窗口一样，其中滚动条最初出现，然后淡出。这样你就知道它是可滚动的，但它会离开你的视线。我想我可以在加载时添加一个类来应用::-webkit-scrollbar规则，并使用CSS过渡将其淡出。 - Sam Hasler

我在 div 上使用了 -webkit-overflow-scrolling: touch，直到开始滚动之前我看不到滚动条。 - Sam Hasler

用户代理切换器？您是在说您还没有在实际的iPad/iPhone上测试过吗？因为只有这样才能知道它在iOS上的行为如何。 - Sam Hasler

我已在iPad上测试了上述内容，但它并没有按照要求工作。使用UA切换测试布局和JavaScript UA嗅探是可以的，但是当涉及到测试实际浏览器行为时，您必须在目标设备上进行实际测试。此外，Chrome Dev工具现在内置了用户代理切换功能。 - Sam Hasler

@MarmiK，不，它应该在页面加载时就可见（这样用户就知道它是可滚动的），然后立即淡出。每当用户滚动时，它都应该重新出现，然后再次淡出。此演示重现了此行为：http://areaaperta.com/nicescroll/demo.html - Sam Hasler

Answer 2

关于原始问题：最好的解决方案是使用外部库来实现滚动条（已经推荐了iScroll，但是甚至jQuery UI本身也包含滚动条）。但是，始终显示滚动条可能会偏离一般iOS UI（见下文）。

另一种选择是使用其他GUI元素来指示内容可以滚动。考虑在元素末尾添加小渐变区域（内容在那里淡化为背景），提示触摸和滚动时内容会继续。

在iOS5中，overflow: scroll的功能与预期相符，即允许用一个手指在div的尺寸范围内上下滚动。但是可滚动的

没有滚动条。这与iOS（5）中的一般UI有些不同。通常情况下也没有滚动条，但当用户开始滚动内容区域时，它们会出现，并在触摸事件停止后再次消失。

- hanskan

---

为什么 overflow: scroll 在 x 轴上不能按预期工作？ - GreySage

Answer 3

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

在线演示

代码:

$(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});
    $("#divexample1").niceScroll();//or styles/options below
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
  });

- Gomino

---

这就是如何制作兼容性表格的正确方式！ - Sam Hasler

@SamHasler，您不满意我的答案有什么原因吗？也许我可以帮忙？ - Gomino

我给这个答案点了赞，因为它确实解决了问题，但它是一个插件，我将把它作为一个（大于3000行代码）的依赖项，而不是一些我可以理解和管理的CSS/JS代码，所以我不会使用它。 - Sam Hasler

Answer 4

如果您希望滚动条始终可见，

请不要设置-webkit-overflow-scrolling: touch，

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

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

你失去了动量效应，但滚动条仍将存在。

（在iPhone 4 / iOS 7下测试）

- lulalala

---

但是删除“-webkit-overflow-scrolling: touch”有时会在某些情况下停止滚动效果，直到我将iPhone从纵向切换到横向再切换回纵向。然后它才能正常工作。 - Amit Shah

Answer 5

据我所见，移动版Safari不支持滚动条。我找到的最好的插件是this。

它的演示可以在这里找到here。 它还有多个predefined skins可适用于您的应用程序。

这是一个样例：

- Bilal Fazlani

Answer 6

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

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

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

- Matt

Answer 7

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

我还没有在 iOS5 上进行测试，但据说现在可以滚动内部 div。

如果它不是内部 div，则应该能够在仅滚动时看到滚动条 - 这不仅适用于 iOS - lion 也已经摆脱了所有本地滚动条。只有在窗口滚动或窗口首次加载时才能看到它们。

- HarrisonJackson