我想用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来做，如果它是可行的。
当前回答
简单的回答是:
只做以下工作
在firefox中(截至2022年1月):
:
| property (not pseudo element!) | allowed values | |
|---|---|---|
scrollbar-width |
thin (actually very thin) |
|
auto (standard thick version) |
||
none (hides the scrollbar) |
||
scrollbar-color |
color color |
:
你必须设置两个颜色值，第一个滚动条的拇指，第二个滚动条的背景。 它接受任何正常的颜色值，使用名称如“black”，十六进制值如“#000000”，函数如“rgb(0,0,0)以及变量如“var(——beforelydefinedblack)”。 但是它不把线性梯度作为输入，既不正常也不通过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
我想我将分享我的发现，以防有人正在考虑使用jQuery插件来完成这项工作。
我给了jQuery自定义滚动条去。它非常漂亮，可以进行一些平滑的滚动(具有滚动惯性)，并具有大量可以调整的参数，但对我来说，它的CPU消耗太大了(并且它向DOM添加了相当多的内容)。
现在我要试试完美滚动条。它简单且轻量级(6 KB)，到目前为止它做得还不错。它根本不是CPU密集型的(据我所知)，并且对DOM的添加非常少。它只有几个参数来调整(wheelSpeed和wheelPropagation)，但这是我所需要的，它处理更新滚动内容很好(如加载图像)。
附注:我确实快速看了一下JScrollPane，但@simone是对的，它现在有点过时了，而且是PITA。
简单的回答是:
只做以下工作
在firefox中(截至2022年1月):
:
| property (not pseudo element!) | allowed values | |
|---|---|---|
scrollbar-width |
thin (actually very thin) |
|
auto (standard thick version) |
||
none (hides the scrollbar) |
||
scrollbar-color |
color color |
:
你必须设置两个颜色值，第一个滚动条的拇指，第二个滚动条的背景。 它接受任何正常的颜色值，使用名称如“black”，十六进制值如“#000000”，函数如“rgb(0,0,0)以及变量如“var(——beforelydefinedblack)”。 但是它不把线性梯度作为输入，既不正常也不通过css变量。 顺便说一下，属性的顺序并不重要。
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>
