Firefox 的自定义 CSS 滚动条
我想用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;
}
How can I do the same thing in Firefox?
我知道我可以使用 jQuery 轻松做到这一点，但如果可行的话，我更愿意使用纯 CSS 来做到这一点。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（18）
截至 2018 年底，Firefox 中的自定义功能有限！
请参阅以下答案：
这是背景信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
没有与::-webkit- 等效的 Firefox滚动条和朋友。你必须坚持使用 JavaScript。很多人会喜欢这个功能，请参阅：https://bugzilla.mozilla.org/show_bug.cgi?id=77790
至于 JavaScript 替换，您可以尝试：
As of late 2018, there is now limited customization available in Firefox!
See these answers:
And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
There's no Firefox equivalent to::-webkit-scrollbarand friends.You'll have to stick with JavaScript.Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
As far as JavaScript replacements go, you can try:
Firefox 64 添加了对规范草案 CSS Scrollbars Module Level 1 的支持，其中添加了 href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width" rel="noreferrer">
scrollbar-width和scrollbar-color给出了一些控制滚动条的显示方式。您可以设置
scrollbar-color为以下值之一（来自 MDN 的描述）：auto在没有任何其他相关滚动条颜色属性的情况下，滚动条轨道部分的默认平台呈现。以前的规范包括
dark和light值，未在 Firefox 中实现。这些值已从规范中删除。在带有移动版 Firefox 的原生 Android 上，拇指可以着色，但没有可着色的轨道。
此外，在 99.0 之前的 macOS Firefox 版本中，macOS 默认的自动隐藏半透明滚动条无法通过这些规则设置样式。从 Firefox 99.0 开始，所有 macOS 滚动条模式（在“系统偏好设置”>“显示滚动条”下配置）都可以着色。
视觉演示：
您可以设置
scrollbar-width为以下值之一（来自 MDN 的描述）：auto平台的默认滚动条宽度。thin提供该选项的平台上的细滚动条宽度变体，或者比默认平台滚动条宽度更细的滚动条。none不显示滚动条，但该元素仍可滚动。您还可以根据规范设置特定的长度值。
thin和特定长度可能不会在所有平台上执行任何操作，并且其具体执行的操作是特定于平台的。特别是，Firefox 目前似乎不支持特定的长度值（此评论他们的错误跟踪器似乎证实了这一点）。不过，thin键盘似乎确实得到了很好的支持，至少支持 macOS 和 Windows。在带有移动版 Firefox 的原生 Android 上，
auto宽度拇指已经相当薄，并且thin并不会使其变得更薄。可能值得注意的是，长度值选项和整个滚动条宽度属性正在考虑在未来的草案中删除，如果发生这种情况，这个特定的属性可能会在未来的版本中从 Firefox 中删除。
视觉演示：
Firefox 64 adds support for the spec draft CSS Scrollbars Module Level 1, which adds two new properties of
scrollbar-widthandscrollbar-colorwhich give some control over how scrollbars are displayed.You can set
scrollbar-colorto one of the following values (descriptions from MDN):autoDefault platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.<color><color>Applies the first color to the scrollbar thumb, the second to the scrollbar track.Previously the spec included
darkandlightvalues that were not implemented in Firefox. These values have since been removed from the spec.On stock Android with mobile Firefox the thumb can be colored, but there is no track to color.
Additionally in macOS Firefox version prior to 99.0, the auto-hiding semi-transparent scrollbars that are the macOS default could not be styled by these rules. As of Firefox 99.0 all macOS scrollbar modes (configured under System Preferences > Show Scroll Bars) can be colored.
Visual Demo:
You can set
scrollbar-widthto one of the following values (descriptions from MDN):autoThe default scrollbar width for the platform.thinA thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.noneNo scrollbar shown, however the element will still be scrollable.You can also set a specific length value, according to the spec. Both
thinand a specific length may not do anything on all platforms, and what exactly it does is platform-specific. In particular, Firefox doesn't appear to be currently support a specific length value (this comment on their bug tracker seems to confirm this). Thethinkeywork does appear to be well-supported however, with macOS and Windows support at-least.On stock Android with mobile Firefox the
autowidth thumb is already rather thin, andthindoes not make it thinner.It's probably worth noting that the length value option and the entire
scrollbar-widthproperty are being considered for removal in a future draft, and if that happens this particular property may be removed from Firefox in a future version.Visual Demo:
自 Firefox 64 起，可以使用 简单滚动条样式的新规范（不像带有供应商前缀的 Chrome）。
在这个示例中，可以看到一个结合不同规则来解决 Firefox 和 Chrome 问题的解决方案类似（不相等）的最终结果（例如使用您原来的 Chrome 规则）：
关键规则是：
对于 Firefox
对于 Chrome
请注意，尊重您的解决方案是可能的也可以使用更简单的 Chrome 规则作为最后
，为了在 Firefox 中隐藏滚动条中的箭头，目前需要将其设置为“thin”，规则如下：
scrollbar-width: Thin;Since Firefox 64, is possible to use new specs for a simple Scrollbar styling (not as complete as in Chrome with vendor prefixes).
In this example is possible to see a solution that combine different rules to address both Firefox and Chrome with a similar (not equal) final result (example use your original Chrome rules):
The key rules are:
For Firefox
For Chrome
Please note that respect to your solution, is possible to use also simpler Chrome rules as the following:
Finally, in order to hide arrows in scrollbars also in Firefox, currently is necessary to set it as "thin" with the following rule
scrollbar-width: thin;我可以提供替代方案吗？
没有任何脚本，只有标准化的 CSS 样式和一点点创造力。简短的回答 - 屏蔽现有浏览器滚动条的部分内容，这意味着您保留其所有功能。
有关演示和更深入的解释，请查看此处...
jsfiddle.net/aj7bxtjz/1/
May I offer an alternative?
No scripting whatsoever, only standardized css styles and a little bit of creativity. Short answer - masking parts of the existing browser scrollbar, which means you retain all of it's functionality.
For demo and a little bit more in-depth explanation, check here...
jsfiddle.net/aj7bxtjz/1/
2020 年，此功能有效
https://github.com/Aris-t2/CustomCSSforFx/issues/160
Year 2020 this works
https://github.com/Aris-t2/CustomCSSforFx/issues/160
我想我会分享我的发现，以防有人考虑使用 jQuery 插件来完成这项工作。
我尝试了 jQuery 自定义滚动条。它非常奇特，可以进行一些平滑的滚动（具有滚动惯性），并且有大量可以调整的参数，但它最终对我来说有点过于 CPU 密集型（并且它为 DOM 添加了相当多的量）。
现在我正在尝试Perfect Scrollbar。它简单且轻量（6 KB），并且到目前为止做得还不错。它根本不是 CPU 密集型的（据我所知），并且对 DOM 的添加很少。它只有几个参数需要调整（wheelSpeed 和wheelPropagation），但这就是我所需要的，并且它可以很好地处理滚动内容的更新（例如加载图像）。
PS 我确实快速浏览了一下 JScrollPane，但 @simone 是对的，它现在有点过时了，而且是 PITA。
I thought I would share my findings in case someone is considering a jQuery plugin to do the job.
I gave jQuery Custom Scrollbar a go. It's pretty fancy and does some smooth scrolling (with scrolling inertia) and has loads of parameters you can tweak, but it ended up being a bit too CPU intensive for me (and it adds a fair amount to the DOM).
Now I'm giving Perfect Scrollbar a go. It's simple and lightweight (6 KB) and it's doing a decent job so far. It's not CPU intensive at all (as far as I can tell) and adds very little to your DOM. It's only got a couple of parameters to tweak (wheelSpeed and wheelPropagation), but it's all I need and it handles updates to the scrolling content nicely (such as loading images).
P.S. I did have a quick look at JScrollPane, but @simone is right, it's a bit dated now and a PITA.
2022 年
使用最新的 Firefox 和 Chrome 版本进行测试
以下代码片段将在 Chrome 和 Firefox 上显示相同的滚动条样式，请尝试一下。
您还可以使用以下命令自定义滚动条轨道（但不适用于 Firefox）
Year 2022
Tested with the latest Firefox and Chrome versions
The following snippet will display the same scrollbar styles on Chrome and Firefox, try it out.
You can also customize the scrollbar track using the following (but it will not work for Firefox)
截至 2021 年，只有两个属性可用于 Firefox 滚动条自定义：
滚动条颜色和滚动条宽度。HTML
CSS
As of now, 2021, there are just two properties for Firefox scrollbar customization available;
scrollbar-colorandscrollbar width.HTML
CSS
在这里，我已经为所有主要浏览器尝试过这个CSS测试：自定义颜色在滚动条上工作正常。
是的，不同浏览器的多个版本存在限制。
关键字值
滚动条宽度：自动|细|无；
全球价值观
滚动条宽度：继承|初始|恢复|恢复层；
滚动条宽度：未设置；
Firefox 84 于 2020 年 12 月 15 日发布。删除的属性如下：
删除了专有的 -moz-default-appearance 属性值scrollbar-small（使用scrollbar-width：thin）和scrollbar（仅限 macOS；scrollbar-horizontal 和scrollbar） -vertical 被改用）（bug 1673132）。
Here I have tried this CSS for all major browser & tested: Custom color are working fine on scrollbar.
Yes, there are limitations on several versions of different browsers.
Keyword values
scrollbar-width: auto|thin|none;
Global values
scrollbar-width: inherit|initial|revert|revert-layer;
scrollbar-width: unset;
Firefox 84 was released on December 15, 2020. Removed Properties are as follows:
Removed proprietary -moz-default-appearance property values scrollbar-small (scrollbar-width: thin is used instead) and scrollbar (macOS only; scrollbar-horizontal and scrollbar-vertical are used instead) (bug 1673132).
2021
Firefox
Chrome
垂直和水平滚动条更改宽度或高度属性
2021
Firefox
Chrome
for vertical and horizontal scrollbar change the width or height attribute
这个功能还处于实验阶段，我想 Mozilla 还有很多工作要做，直到每个页面上的每个人都可以使用它。我已经测试了许多解决方案，但以下代码运行良好。
CSS
或
参考：
链接 1
链接 2
This feature is heavily experimental and I guess Mozilla has a lot to do until it becomes usable for everyone on every page. I have tested many solutions but the following code is working perfectly.
CSS
OR
Reference:
LINK 1
LINK 2
火狐浏览器只接受：
Firefox only accepts:
简短的回答：
Firefox 中只有以下工作
（截至 2022 年 1 月）：：
属性
scrollbar-width薄（实际上非常薄）auto（标准厚版本）none（隐藏滚动条）scrollbar-colorcolor color：
您必须设置两个颜色值，第一个滚动条滑块，第二个滚动条背景。
它采用任何正常的颜色值，使用“black”等名称、“#000000”等十六进制值、“rgb(0,0,0)”等函数以及“var(- -先前定义的黑色）”。
但它不采用线性渐变作为输入，通常也不通过 css 变量。
顺便说一下，属性的顺序并不重要。
The short answer:
Only the following work(s)
in firefox (as of JAN 2022):
:
scrollbar-widththin(actually very thin)auto(standard thick version)none(hides the scrollbar)scrollbar-colorcolor color:
You have to set both color values, first scrollbar thumb , second the scrollbar background.
It takes any normal color values, using names like "black", hex-values like "#000000", functions like "rgb(0,0,0) as well as variables like "var(--previouslydefinedblack)".
BUT it does not take linear gradients as input, neither normally nor via css variable.
The order of the properties is unimportant by the way.
到 2024 年，滚动条颜色也适用于 chrome。为了确保跨浏览器解决方案，建议使用 @-moz-document 规则分隔 Firefox 的样式。
As in 2024 scrollbar-color is applying also for chrome. To ensure a cross-browser solution, it's advisable to separate the styles for Firefox using the @-moz-document rule.
它适用于用户风格，并且似乎不适用于网页。我还没有找到 Mozilla 对此的官方指示。虽然它可能在某些时候起作用，但 Firefox 并没有对此提供官方支持。此错误仍然存在 https://bugzilla.mozilla.org/show_bug.cgi?id= 77790
检查http://codemug.com/html/custom-scrollbars-使用-css/ 了解详细信息。
It works in user-style, and it seems not to work in web pages. I have not found official direction from Mozilla on this. While it may have worked at some point, Firefox does not have official support for this. This bug is still open https://bugzilla.mozilla.org/show_bug.cgi?id=77790
check http://codemug.com/html/custom-scrollbars-using-css/ for details.
这适用于 WordPress 人员自定义 CSS
参考：https://github.com/Aris-t2 /CustomCSSforFx/issues/160
This Works on Wordpress Guys Custom CSS
Ref: https://github.com/Aris-t2/CustomCSSforFx/issues/160
我的解决方案：为其他浏览器添加你想要的内容，对于火狐添加：
这是有条件的。所以只影响火狐浏览器。它使滚动条变薄。
My solution: add for other browsers what you want, and for firefox add:
This is conditioned. So affects only firefox. It makes the scrollbar thin.