我想用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来做，如果它是可行的。
当前回答
我想我将分享我的发现，以防有人正在考虑使用jQuery插件来完成这项工作。
我给了jQuery自定义滚动条去。它非常漂亮，可以进行一些平滑的滚动(具有滚动惯性)，并具有大量可以调整的参数，但对我来说，它的CPU消耗太大了(并且它向DOM添加了相当多的内容)。
现在我要试试完美滚动条。它简单且轻量级(6 KB)，到目前为止它做得还不错。它根本不是CPU密集型的(据我所知)，并且对DOM的添加非常少。它只有几个参数来调整(wheelSpeed和wheelPropagation)，但这是我所需要的，它处理更新滚动内容很好(如加载图像)。
附注:我确实快速看了一下JScrollPane，但@simone是对的，它现在有点过时了，而且是PITA。
其他回答
Firefox只接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
简单的回答是:
只做以下工作
在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变量。 顺便说一下，属性的顺序并不重要。
我可以提供另一种选择吗?
没有脚本，只有标准化的css样式和一点点创意。简单的回答——屏蔽现有浏览器滚动条的部分，这意味着你保留了它的所有功能。
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
要获得演示和更深入的解释，请查看这里…
jsfiddle.net/aj7bxtjz/1/
截至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
这适用于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
