CSS webkit-scrollbar和safari [英] CSS webkit-scrollbar and safari

问题描述

我尝试使用CSS ::-webkit-scrollbar 制作类似于Google的新滚动条的工具.在chrome中，一切正常，而在Safari中则不能.

I tried to make something similar to the new scrollbar of Google using the CSS ::-webkit-scrollbar. In chrome everything works fine, in safari not.

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

我对问题做了一些截图:

I made some screenshot of my problem:

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

This is chrome and it's ok: http://i.imgur.com/wQMP2.png

当您尝试用鼠标滚动(而不点击它)时，这是野生动物园: http://i.imgur.com/bFiWj.png

This is safari when you try to scroll with the mouse (without clicking on it): http://i.imgur.com/bFiWj.png

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

When you use the scrollbar by clicking on it with mouse the scrollbar works, the problem is only when you use the trackpad or the scroll wheel

(我在Mac上使用Safari尝试过，在Windows上没有使用Safari

(I tried with Safari on a Mac, didn't try with Safari on Windows)

推荐答案

使用Safari 6.0解决了问题

The problem was solved with Safari 6.0

那只是一个错误

这篇关于CSS webkit-scrollbar和safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！