CSS 如何使用css更改滚动条颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12293275/
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
How to change the scrollbar color using css
提问by Suresh Pattu
My jsfiddle is here
I trying to change the color of the scrollbar but here it is not working.
我的 jsfiddle 在这里
我试图更改滚动条的颜色，但在这里它不起作用。
Css:
css：
.flexcroll {
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}?
回答by hayk.mart
You can use the following attributes for webkit, which reach into the shadow DOM:
您可以为 webkit 使用以下属性，这些属性可以访问shadow DOM：
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Here's a working fiddle with a red scrollbar, based on code from this pageexplaining the issues.
这是一个带有红色滚动条的工作小提琴，基于此页面中解释问题的代码。
http://jsfiddle.net/hmartiro/Xck2A/1/
http://jsfiddle.net/hmartiro/Xck2A/1/
Using this and your solution, you can handle all browsers except Firefox, which at this point I think still requires a javascript solution.
使用这个和你的解决方案，你可以处理除 Firefox 之外的所有浏览器，在这一点上我认为它仍然需要一个 javascript 解决方案。
回答by Ahsan Khurshid
Your css will only work in IE browser. And the css suggessted by hayk.martwill olny work in webkit browsers. And by using different css hacks you can't style your browsers scroll bars with a same result.
您的 css 仅适用于 IE 浏览器。hayk.mart建议的 css将在 webkit 浏览器中正常工作。并且通过使用不同的 css hack，你不能用相同的结果来设置浏览器滚动条的样式。
So, it is better to use a jQuery/Javascriptplugin to achieve a cross browser solution with a same result.
因此，最好使用jQuery/Javascript插件来实现具有相同结果的跨浏览器解决方案。
Solution:
解决方案：
By Using jScrollPanea jQuery plugin, you can achieve a cross browser solution
通过使用jScrollPane一个 jQuery 插件，可以实现跨浏览器的解决方案
