Question

我尝试使用CSS ::-webkit-scrollbar制作类似于Google新滚动条的内容。在chrome中，一切都运行良好，而不是徒步旅行。

我的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）

Answer 1

使用Safari 6.0解决了这个问题

这只是一个错误

Answer 2

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

-webkit-overflow-scrolling：自动！important;

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

否则， -webkit-overflow-scrolling：自动；

会工作的。

CSS webkit-scrollbar和safari

2 个答案: