用谷歌浏览器在css中调整滚动条（-webkit）

Question

有人可以帮我吗？我想为滚动条做一个简单的样式。我在互联网上发现了一些信息，并尝试了一下，但似乎由于某些原因它并不真正起作用。刷新页面时滚动条看起来很好，但只要触摸滚动条就会变得疯狂。它充满了很多颜色，你不能理解这是一个滚动条。

这怎么看起来你触摸它 - http://i40.tinypic.com/a2evro.png

呢？这里怎么看你触摸后它 - http://i44.tinypic.com/qzkirn.png

这里是我把CSS代码：

::-webkit-scrollbar { 
width: 16px; 
height: 16px; } 

::-webkit-scrollbar-thumb { 
background-color: rgba(0, 0, 0, 0.2); 
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); } 

谢谢你们。干杯。亚历克斯

Answer 1

Here is an example that works：

::-webkit-scrollbar { 
    height: 12px; 
    width: 12px; 
    background: #000; 
} 

::-webkit-scrollbar-thumb { 
    background: #393812; 
    -webkit-border-radius: 1ex; 
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); 
} 

::-webkit-scrollbar-corner { 
    background: #000; 
} 

或者您可以使用jScrollPane。