CSS 如何使自定义滚动条在所有浏览器中显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15420314/
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 make custom scrollbars show in all browsers?
提问by Farah Wahab
I am using a simple code for a color customized scrollbar:
我正在为颜色自定义滚动条使用一个简单的代码：
<style type="text/css">
<!--
BODY
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #FF99FF;
scrollbar-track-color: #FFCCFF;
}
-->
</style>
And it doesn't work in chrome, but it does in IE and not sure about other browsers. I am using chrome as my main browser, I have seen this issue on other websites as well but was wondering if there was any way around it?
它在 chrome 中不起作用，但它在 IE 中起作用，并且不确定其他浏览器。我使用 chrome 作为我的主浏览器，我在其他网站上也看到过这个问题，但想知道是否有任何解决方法？
There is a way to create semi-opacity divs/boxes that work in all browsers these days with special scripts, so was wondering if there was a solution like that for the scrollbars?
现在有一种方法可以使用特殊脚本创建在所有浏览器中都可以使用的半透明 div/box，所以想知道是否有类似滚动条的解决方案？
Thanks!
谢谢！
回答by Iwo Kucharski
Here have some plugins that works for all browsers:
这里有一些适用于所有浏览器的插件：
回答by Shradhey Tripathi
::-webkit-scrollbar {
width: 15px;
background:lightgray;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1);
border-radius: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 15px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:cyan;
}
This will work in Chrome. Firefox doesn't support scroll styling. Hope it helps!
这将在 Chrome 中工作。Firefox 不支持滚动样式。希望能帮助到你！
回答by Agustin Meriles
scrollbaris not a CSS standard. In Chrome or Safari (WebKit) you can use the extension prefixed by -webkit-Read more here.
scrollbar不是 CSS 标准。在 Chrome 或 Safari (WebKit) 中，您可以使用以-webkit-Read more here为前缀的扩展程序。
FireFox doesn't support scrollbar styling.
FireFox 不支持滚动条样式。
So probably you can support this effect in IE and WebKit browsers only, or use JavaScript libraries as Iwo Kucharski said.
所以可能你只能在 IE 和 WebKit 浏览器中支持这种效果，或者像 Iwo Kucharski 所说的那样使用 JavaScript 库。
回答by slezica
Those attributes will simply not work outside Internet Explorer. They are a somewhat bizarre Microsoft concoction that was never in any standard.
这些属性在 Internet Explorer 之外根本不起作用。它们是一种有点奇怪的微软混合物，从来没有任何标准。
If you want to fake it, you'll need some Javascript. I don't think pure CSS will get you the effect.
如果你想伪造它，你需要一些 Javascript。我不认为纯 CSS 会给你带来效果。
回答by Daniel absi
If we disable the javascript the scroll won't work, is no one have the code in <noscript>as well.
如果我们禁用 javascript，滚动将无法工作，也没有人拥有代码<noscript>。
