我想用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来做，如果它是可行的。
当前回答
截至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
其他回答
我可以提供另一种选择吗?
没有脚本，只有标准化的css样式和一点点创意。简单的回答——屏蔽现有浏览器滚动条的部分，这意味着你保留了它的所有功能。
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
要获得演示和更深入的解释，请查看这里…
jsfiddle.net/aj7bxtjz/1/
它在用户风格中起作用，但在网页中似乎不起作用。我还没有从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/。
2021
火狐
.nav{
scrollbar-width: 0px;
scrollbar-width: none;}
铬
::-webkit-scrollbar {
height: 0; /* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
对于垂直和水平滚动条，更改宽度或高度属性
2022年
使用最新的Firefox和Chrome版本进行测试
下面的代码片段将在Chrome和Firefox上显示相同的滚动条样式，请尝试一下。
html { /*对于Firefox */ overflow-y:滚动; 滚动条-color: #008de4 #0d3b97; scrollbar-width:薄; ｝ /*用于Chrome和除Firefox之外的其他浏览器*/ 身体:-webkit-scrollbar { 宽度:0.5 em; background - color: # 0 d3b97; ｝ 身体:-webkit-scrollbar-thumb { background - color: # 008 de4; ｝ < html > <body style="height: 600px"></body> . < / html >
还可以使用以下方法自定义滚动条跟踪(但不适用于Firefox)
::-webkit-scrollbar-track
这适用于Wordpress Guys自定义CSS
/* Fire-Fox Scrollbar */
:root{
scrollbar-face-color: rgb(176, 88, 54); /* Firefox 63 compatibility */
scrollbar-track-color: rgb(51, 62, 72); /* Firefox 63 compatibility */
scrollbar-color: rgb(176, 88, 54) rgb(51, 62, 72);
scrollbar-width: auto;
}
裁判:https://github.com/Aris-t2/CustomCSSforFx/issues/160
