我想用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来做，如果它是可行的。
当前回答
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
其他回答
截至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
Firefox只接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
自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;
Firefox 64增加了对CSS Scrollbars Module Level 1的规范草案的支持，它增加了两个新的属性scrollbar-width和scrollbar-color，它们可以控制滚动条的显示方式。
你可以将scrollbar-color设置为以下值之一(来自MDN的描述):
auto滚动条的轨道部分的默认平台呈现，在没有任何其他相关滚动条颜色属性的情况下。 <color> <color>将第一种颜色应用到滚动条拇指上，将第二种颜色应用到滚动条轨道上。
之前，该规范包含了Firefox中没有实现的dark和light值。这些值已经从规范中删除了。
在带有移动Firefox的Android上，拇指可以着色，但没有着色的轨迹。
此外，在99.0之前的macOS Firefox版本中，macOS默认的自动隐藏半透明滚动条不能按这些规则设置样式。从Firefox 99.0开始，所有macOS滚动条模式(在系统首选项>显示滚动条下配置)都可以着色。
视觉演示:
.scroll { 宽度:20%; 身高:100 px; 边框:1px纯灰色; 溢出:滚动; 显示:inline-block; ｝ .scroll-color-auto { scrollbar-color:汽车; ｝ .scroll-color-colors { 滚动条颜色:橙黄色; ｝ <div class="scroll -color-auto"> 汽车< p > < / p > < p >汽车< / p > < p >汽车< / p > < p >汽车< / p > < p >汽车< / p > < / p > < p >汽车 < / div > <div class="scroll - scroll-color-colors"> 颜色< p > < / p > < p > < / p >颜色颜色< p > < / p > < / p > < p >颜色颜色< p > < / p > < / p > < p >颜色 < / div >
你可以将scrollbar-width设置为以下值之一(来自MDN的描述):
auto平台默认的滚动条宽度。 thin提供该选项的平台上的薄滚动条宽度变体，或者比默认平台滚动条宽度更薄的滚动条。 没有显示滚动条，但是元素仍然是可滚动的。
您还可以根据规范设置一个特定的长度值。thin和特定长度可能在所有平台上都不起任何作用，它具体做什么是特定于平台的。特别是，Firefox目前似乎不支持特定的长度值(他们的错误跟踪器上的评论似乎证实了这一点)。然而，瘦按键似乎得到了很好的支持，至少macOS和Windows支持。
在Android和移动Firefox上，自动宽度拇指已经相当薄了，但薄并不会让它更薄。
值得注意的是，长度值选项和整个滚动条宽度属性正在考虑在未来的草案中删除，如果发生这种情况，这个特定的属性可能会在未来的版本中从Firefox中删除。
视觉演示:
.scroll { width: 30%; height: 100px; border: 1px solid grey; overflow: scroll; display: inline-block; } .scroll-width-auto { scrollbar-width: auto; } .scroll-width-thin { scrollbar-width: thin; } .scroll-width-none { scrollbar-width: none; } <div class="scroll scroll-width-auto"> <p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p> </div> <div class="scroll scroll-width-thin"> <p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p> </div> <div class="scroll scroll-width-none"> <p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p> </div>
这适用于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
