Firefox的自定义CSS滚动条

Question

Firefox的自定义CSS滚动条

我想用CSS定制一个滚动条。

我使用这个WebKit CSS代码，它适用于Safari和Chrome：

::-webkit-scrollbar {
    width: 15px;
    height: 15px;}::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;}::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;}

我如何在Firefox中做同样的事情呢？

我知道我可以很容易地使用jQuery来完成它，但是如果它是可行的，我更愿意使用纯CSS来完成它。

会感谢别人的专家建议！

Answer 1

我想我会分享我的发现，以防有人考虑使用JQuery插件来完成这项工作。我给jQuery自定义滚动条开始吧。它非常花哨，可以做一些平滑的滚动(带有滚动惯性)，并且有很多可以调整的参数，但是对我来说，它的CPU太密集了(它为DOM增加了相当多的数量)。现在我给完美滚动条开始吧。它简单而轻量级(6KB)，到目前为止它做的还不错。它根本不需要CPU(据我所知)，对DOM的添加也很少。它只有几个参数可以调整(轮速和轮向传播)，但这是我所需要的，它很好地处理滚动内容的更新(比如加载图像)。我看了一下JScrollPane，但是@Simone是对的，它现在有点过时了。