CSS webkit-scrollbar 和 safari答案

【问题标题】：CSS webkit-scrollbar and safariCSS webkit-scrollbar 和 safari
【发布时间】：2012-07-26 08:42:50
【问题描述】：

我尝试使用 CSS ::-webkit-scrollbar 制作类似于 Google 新滚动条的内容。在 chrome 中一切正常，在 safari 中则不行。

我的 CSS 是

::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
::-webkit-scrollbar-button{height:0;width:0}
::-webkit-scrollbar-track{background-clip:padding-box;box-shadow:inset 1px 0 0 #e6e6e6}
::-webkit-scrollbar-track:hover{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #e6e6e6}
::-webkit-scrollbar-track:active{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #dcdcdc,inset -1px 0 0 #eeeeee}
::-webkit-scrollbar-thumb{background-color:#cccccc;background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 0px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 #e6e6e6,inset 0 -1px 0 #eeeeee}
::-webkit-scrollbar-thumb:hover{background-color:#999999;box-shadow:inset 1px 1px 1px #c0c0c0}
::-webkit-scrollbar-thumb:active{background-color:#808080;box-shadow:inset 1px 1px 3px #a6a6a6}

我对我的问题做了一些截图：

这是 chrome，没关系：http://i.imgur.com/wQMP2.png

当您尝试用鼠标滚动（不点击它）时，这是 safari：http://i.imgur.com/bFiWj.png

当您通过鼠标单击滚动条来使用滚动条时，滚动条会起作用，问题仅在于您使用触控板或滚轮时

（我在 Mac 上用 Safari 试过，在 Windows 上用 Safari 没试过）

【问题讨论】：

这将是 Safari 中的一个错误。确保您拥有最新版本，如果它仍然存在，请report it as a bug 给 Apple。 注意：可能有更好的地方来报告它——这只是我能想到的第一件事。
我查看了Safari是否发布了新版本，Safari 6 2天前发布了，问题消失了。有时我认为我只是运气不好......谢谢@bfrohs！
似乎 ios6 会阻止您设置滚动条样式！？ stackoverflow.com/questions/12510013/…

标签： css safari webkit

【解决方案1】：

Safari 6.0 解决了这个问题

这只是一个错误

【讨论】：

【解决方案2】：

确保将以下属性设置为 auto，以便 webkit-scrollbar 在 IOS 中工作，

-webkit-overflow-scrolling: auto !important;

!important 是必需的，仅当您覆盖一些预定义的库 CSS 时

否则， -webkit-overflow-scrolling: 自动;

会起作用的。

【讨论】：