我想用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来做，如果它是可行的。
当前回答
2020年，这个可行
/* Thin Scrollbar */
:root{
scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
scrollbar-width: thin !important;
}
https://github.com/Aris-t2/CustomCSSforFx/issues/160
其他回答
这适用于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
Firefox只接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
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
自Firefox 64以来，可以使用新的规范来实现简单的滚动条样式(不像Chrome中使用供应商前缀那样完整)。
在这个例子中，可以看到一个解决方案，结合不同的规则，以解决Firefox和Chrome具有类似(不相等)的最终结果(示例使用您原来的Chrome规则):
关键规则是:
为Firefox
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
在Chrome
.scroller::-webkit-scrollbar {
width: 15px;
height: 15px;
}
.scroller::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
请注意，对于您的解决方案，也可以使用更简单的Chrome规则如下:
.scroller::-webkit-scrollbar-track {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb {
height: 30px;
background-color: #0A4C95;
}
最后，为了在Firefox的滚动条中隐藏箭头，目前有必要使用以下规则scrollbar-width将其设置为“thin”:thin;
这个特性还处于实验阶段，我想Mozilla还有很多工作要做，直到它对每个页面上的每个人都可用为止。我已经测试了许多解决方案，但下面的代码工作得很完美。
CSS
:root {
scrollbar-color: #333333 #999999 !important;
scrollbar-width: thin !important;
}
OR
#ClassName {
scrollbar-color: #333333 #999999 !important;
scrollbar-width: thin !important;
}
参考: 链接1 链接2
