在 Google Chrome (-webkit) 中使用 css 设置滚动条的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9664325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style the scrollbar with css in Google Chrome (-webkit)
提问by Alexandru Vlas
Can somebody please help me? I want to do a simple style for the scrollbar. I found some information on the internet and tried it, but it seems that it doesn't really work for some reasons. The scrollbar looks fine when refreshing the page, but as soon as you touch the scrollbar it goes crazy. It fills with a lot of colours and you can't understand that that is a scrollbar.
有人能帮帮我吗？我想为滚动条做一个简单的样式。我在网上找到了一些资料并尝试了一下，但由于某些原因，它似乎并没有真正起作用。刷新页面时滚动条看起来不错，但是一旦您触摸滚动条，它就会变得疯狂。它充满了很多颜色，你无法理解那是一个滚动条。
Here how it looks before you touch it - http://i40.tinypic.com/a2evro.png
这是触摸之前的样子 - http://i40.tinypic.com/a2evro.png
Here how it looks after you touch it - http://i44.tinypic.com/qzkirn.png
这是你触摸它后的样子 - http://i44.tinypic.com/qzkirn.png
Here is the code that I put in css:
这是我放在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); }
Thank you all. Cheers. Alex
谢谢你们。干杯。亚历克斯
回答by orel
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;
}
Or you can use jScrollPane.
或者您可以使用jScrollPane。
