如何在所有浏览器中显示自定义滚动条？

Question

我正在使用一个简单的代码用于颜色自定义滚动条:

<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>

并且它在chrome中不起作用,但它在IE中并不确定其他浏览器.我使用chrome作为我的主浏览器,我也在其他网站上看过这个问题,但是想知道是否有任何解决方法？

有一种方法可以创建半透明度的div/box,这些div/box现在可以在所有浏览器中使用特殊脚本,因此想知道滚动条是否有这样的解决方案？

谢谢!

Answer 1

这里有一些适用于所有浏览器的插件:

1. http://jscrollpane.kelvinluck.com/
2. http://www.hesido.com/web.php?page=customscrollbar
3. http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

Answer 2

::-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;
} 

这将在Chrome中运行。Firefox不支持滚动样式。希望能帮助到你！

Answer 3

这些属性在 Internet Explorer 之外根本不起作用。它们是微软的一种有点奇怪的混合物，从未出现在任何标准中。

如果你想伪造它，你需要一些 Javascript。我不认为纯 CSS 会给你带来这种效果。