自定义CSS滚动条的Firefox

我想用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来做）。

会感谢有人的专家build议！

Answer 1

没有Firefox相当于::-webkit-scrollbar和朋友。

你必须坚持使用JavaScript。

很多人会喜欢这个function，请看： https ： //bugzilla.mozilla.org/show_bug.cgi？id = 77790

这份报告要求您要求完全相同的内容： https ： //bugzilla.mozilla.org/show_bug.cgi？id = 547260

作为我连接的第一份报告的副本，它被closures了。

---

就JavaScript替代品而言，您可以尝试：

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane （但它已经过时了，显然是PITA …）

Answer 2

我想我会分享我的调查结果，以防有人正在考虑使用JQuery插件来完成这项工作。

我给JQuery自定义滚动条去了。 这是非常花哨的，并做一些平滑的滚动（滚动惯性），并有负载的参数，你可以调整，但它最终有点太CPU密集我（并增加了相当数量的DOM）。

现在，我正在给Perfect Scrollbar一个去。 这是简单和轻量级（6KB），它到目前为止做的体面的工作。 它根本不是CPU密集型的（据我所知）并且对DOM增加很less。 它只有几个参数来调整（wheelSpeed和wheelPropagation），但是这是我所需要的，它可以很好地处理滚动内容的更新（例如加载图像）。

PS我看了一下JScrollPane，但@simone是对的，现在有点过时了，还有一个PITA。

Answer 3

我可以提供一个替代？

没有脚本，只有标准化的CSS风格和一点创意。 简短的回答 – 掩盖现有的浏览器滚动条的一部分，这意味着你保留了所有的function。

 .scroll_content { position: relative; width: 400px; height: 414px; top: -17px; padding: 20px 10px 20px 10px; overflow-y: auto; } 

对于演示和一点点深入的解释，请点击这里…

jsfiddle.net/aj7bxtjz/1/

Answer 4

它以用户风格工作，似乎不在网页中工作。 我还没有findMozilla的官方方向。 虽然它可能在某些时候起作用，但Firefox并没有官方的支持。 这个错误仍然是打开的https://bugzilla.mozilla.org/show_bug.cgi?id=77790

 scrollbar { /* clear useragent default style*/ -moz-appearance: none !important; } /* buttons at two ends */ scrollbarbutton { -moz-appearance: none !important; } /* the sliding part*/ thumb{ -moz-appearance: none !important; } scrollcorner { -moz-appearance: none !important; resize:both; } /* vertical or horizontal */ scrollbar[orient="vertical"] { color:silver; } 

查看http://codemug.com/html/custom-scrollbars-using-css/了解详情。;

Answer 5

 @-moz-document url-prefix(http://),url-prefix(https://) { scrollbar { -moz-appearance: none !important; background: rgb(0,255,0) !important; } thumb,scrollbarbutton { -moz-appearance: none !important; background-color: rgb(0,0,255) !important; } thumb:hover,scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255,0,0) !important; } scrollbarbutton { display: none !important; } scrollbar[orient="vertical"] { min-width: 15px !important; } }