Html 如何使div的滚动条保持可见，并阻止它隐藏在苹果OS/iOS（Chrome/Safari）上？

我有一个div，其中包含一些可滚动的内联内容

在苹果操作系统Yosemite（Chrome和Safari）和iOS iPad/iPhone（Chrome和Safari）上，这个滚动拇指/条是隐藏的（直到你真正开始滚动内容，它才会出现）

在Windows Chrome/IE/FF上，此滚动拇指/条始终可见

对于Safari和Chrome等，如何在Apple OS/iOS上始终保持此滚动拇指/滚动条可见？

试试这个

::-webkit-scrollbar { 
    display: none; 
}

---

在这两种情况下，浏览器都默认为操作系统的滚动视图——在OSX上，这意味着滚动条消失；在windows上，这意味着滚动拇指/滚动条始终隐藏（有没有想过为什么所有可滚动窗口在给定操作系统上看起来几乎相同？）。唯一的解决方案是不使用本机可滚动区域（

overflow:hidden

），而是将其替换为重新实现滚动界面（但允许您控制其外观）的JavaScript（例如）。请记住，这样做会带来它自己的一系列兼容性问题

老实说，（可以说）最好的办法就是向用户展示他们熟悉的东西——在OSX上，这是一个隐藏的滚动条，在Windows上，这是一个无所不在的滚动条。坚持默认设置，您将永远不会遇到用户体验问题

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

---

感谢大家，@Adam yeah我想保留原稿，但在我的苹果系统中，用户甚至不知道该区域是可滚动的，除非我给他们一些指示，如果我无法用您提供的javascript等找到解决方案，我可能只会放上文本（滚动如下）插入div的标题等，以帮助指示这在iOS上的Chrome和Safari中实际上不起作用。坚持默认设置的问题是，如果用户正在使用轨迹板，OS X会隐藏滚动条。用户不知道你的Div中有哪些可以滚动到的额外内容。如果看到有人使用你的网站，这会让他们感到困惑。非常遗憾的是，我们现在不得不实现自定义滚动条，因为OSX试图变得聪明。@Sheepdogsheep-坚持默认设置的好处是，人们知道他们的默认设置是如何工作的，因为他们在任何地方都能看到它。如果您是OSX用户，那么您已经知道在可滚动元素上不一定会看到滚动条。OSX用户在可滚动元素上没有可见的滚动条比非OSX用户没有可见的滚动条更不容易混淆他们。这在iOS上的Chrome和Safari中实际上不起作用