我想用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 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;
其他回答
.mat-tab-header {
overflow-x: scroll !important;
// For Firefox
scrollbar-color: transparent transparent;
border-bottom: none;
}
.mat-tab-header::-webkit-scrollbar { // TO Remove horizontal scrollbar in tabs
display: none !important;
}
简单的回答是:
只做以下工作
在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变量。 顺便说一下，属性的顺序并不重要。
这个特性还处于实验阶段，我想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
2021
火狐
.nav{
scrollbar-width: 0px;
scrollbar-width: none;}
铬
::-webkit-scrollbar {
height: 0; /* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
对于垂直和水平滚动条，更改宽度或高度属性
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
