我想用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变量。 顺便说一下，属性的顺序并不重要。
其他回答
Firefox只接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
我可以提供另一种选择吗?
没有脚本，只有标准化的css样式和一点点创意。简单的回答——屏蔽现有浏览器滚动条的部分，这意味着你保留了它的所有功能。
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
要获得演示和更深入的解释，请查看这里…
jsfiddle.net/aj7bxtjz/1/
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增加了对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>
2021
火狐
.nav{
scrollbar-width: 0px;
scrollbar-width: none;}
铬
::-webkit-scrollbar {
height: 0; /* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
对于垂直和水平滚动条，更改宽度或高度属性
