我想用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来做,如果它是可行的。
它在用户风格中起作用,但在网页中似乎不起作用。我还没有从Mozilla那里找到这方面的官方指示。虽然它可能在某些时候起作用,但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/。
截至2018年底,Firefox现在有有限的定制功能!
请看这些答案:
https://stackoverflow.com/a/54101063/405015
https://stackoverflow.com/a/53739309/405015
这是背景信息:https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Firefox中没有与::-webkit-scrollbar和friends相对应的功能。
你必须坚持使用JavaScript。
很多人会喜欢这个功能,参见:https://bugzilla.mozilla.org/show_bug.cgi?id=77790
就JavaScript替换而言,你可以尝试:
https://github.com/mdbootstrap/perfect-scrollbar
https://github.com/Grsmto/simplebar
https://github.com/vitch/jScrollPane