Firefox 自定义 CSS 滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6165472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom CSS Scrollbar for Firefox
提问by Dimitri Vorontzov
I want to customize a scrollbar with CSS.
我想用 CSS 自定义滚动条。
I use this WebKit CSS code, which works well for Safari and Chrome:
我使用这个 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?
我如何在 Firefox 中做同样的事情？
I know I can easily do it using jQuery, but I would prefer to do it with pure CSS if it's doable.
我知道我可以使用 jQuery 轻松完成，但如果可行，我更愿意使用纯 CSS 来完成。
Would be grateful for somebody's expert advice!
将不胜感激有人的专家建议！
采纳答案by thirtydot
As of late 2018, there is now limited customization available in Firefox!
截至 2018 年底，Firefox 中现在提供有限的自定义！
See these answers:
看到这些答案：
And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
这是背景信息：https: //bugzilla.mozilla.org/show_bug.cgi?id=1460109
There's no Firefox equivalent to ::-webkit-scrollbarand friends.
没有 Firefox 等同于::-webkit-scrollbar和朋友。
You'll have to stick with JavaScript.
你必须坚持使用 JavaScript。
Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
很多人都喜欢这个功能，请参阅：https: //bugzilla.mozilla.org/show_bug.cgi?id=77790
As far as JavaScript replacements go, you can try:
就 JavaScript 替换而言，您可以尝试：
- https://github.com/noraesae/perfect-scrollbar
- https://github.com/jnicol/trackpad-scroll-emulator
- https://github.com/vitch/jScrollPane(but it's outdated and apparently a PITA...)
回答by Alexander O'Mara
Firefox 64 adds support for the spec draft CSS Scrollbars Module Level 1, which adds two new propertiesof scrollbar-widthand scrollbar-colorwhich give some control over how scrollbars are displayed.
Firefox 64 添加了对规范草案CSS Scrollbars Module Level 1 的支持，它添加了和 的两个新属性，可以对滚动条的显示方式进行一些控制。scrollbar-widthscrollbar-color
You can set scrollbar-colorto one of the following values (descriptions from MDN):
您可以设置scrollbar-color为以下值之一（来自 MDN 的描述）：
autoDefault platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.darkShow a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors.lightShow a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors.<color><color>Applies the first color to the scrollbar thumb, the second to the scrollbar track.
auto在没有任何其他相关滚动条颜色属性的情况下，滚动条轨道部分的默认平台渲染。dark显示一个深色滚动条，它可以是平台提供的滚动条的深色变体，也可以是带有深色的自定义滚动条。light显示轻量级滚动条，可以是平台提供的轻量级滚动条，也可以是自定义的浅色滚动条。<color><color>将第一种颜色应用于滚动条滑块，将第二种颜色应用于滚动条轨道。
Note that darkand lightvalues are not currently implemented in Firefox.
请注意，dark和light值当前未在 Firefox 中实现。
macOS notes:
macOS 注释：
The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are colored.
macOS 默认的自动隐藏半透明滚动条不能使用此规则着色（它们仍然根据背景选择自己的对比色）。只有永久显示的滚动条（系统偏好设置 > 显示滚动条 > 始终）是彩色的。
Visual Demo:
视觉演示：
.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.scroll-color-dark {
scrollbar-color: dark;
}
.scroll-color-light {
scrollbar-color: light;
}
.scroll-color-colors {
scrollbar-color: orange lightyellow;
}<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>
<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>
<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>
<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>You can set scrollbar-widthto one of the following values (descriptions from MDN):
您可以设置scrollbar-width为以下值之一（来自 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.
auto平台的默认滚动条宽度。thin提供该选项的平台上的细滚动条宽度变体，或者比默认平台滚动条宽度更细的滚动条。none没有显示滚动条，但是元素仍然可以滚动。
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). The thinkeywork does appear to be well-supported however, with macOS and Windows support at-least.
您还可以根据规范设置特定的长度值。这两个thin和一个特定的长度不能在所有平台上做任何事情，究竟它是特定于平台的。特别是，Firefox 目前似乎不支持特定的长度值（关于他们的错误跟踪器的评论似乎证实了这一点）。该thinkeywork确实出现了但是很好的支持，与-至少MacOS和Windows的支持。
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.
可能值得注意的是，长度值选项和整个scrollbar-width属性正在考虑在未来的草案中删除，如果发生这种情况，这个特定属性可能会在未来版本中从 Firefox 中删除。
Visual Demo:
视觉演示：
.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>回答by Tomaz
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.
没有任何脚本，只有标准化的 css 样式和一点点创造力。简短回答 - 屏蔽现有浏览器滚动条的一部分，这意味着您保留了它的所有功能。
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
For demo and a little bit more in-depth explanation, check here...
有关演示和更深入的解释，请查看此处...
回答by Markus Coetzee
I thought I would share my findings in case someone is considering a JQuery plugin to do the job.
我想我会分享我的发现，以防有人考虑使用 JQuery 插件来完成这项工作。
I gave JQuery Custom Scrollbara 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).
我试了一下JQuery 自定义滚动条。它非常花哨，可以平滑滚动（具有滚动惯性），并且可以调整大量参数，但最终对我来说有点过于 CPU 密集型（并且它为 DOM 增加了相当多的数量）。
Now I'm giving Perfect Scrollbara go. It's simple and lightweight (6KB) 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).
现在我尝试使用Perfect Scrollbar。它简单而轻量级 (6KB)，到目前为止它做得不错。它根本不是 CPU 密集型的（据我所知），并且对您的 DOM 几乎没有增加。它只有几个参数需要调整（wheelSpeed 和wheelPropagation），但这就是我所需要的，它可以很好地处理滚动内容的更新（例如加载图像）。
P.S. I did have a quick look at JScrollPane, but @simone is right, it's a bit dated now and a PITA.
PS 我确实快速浏览了 JScrollPane，但 @simone 是对的，它现在有点过时了，而且是 PITA。
回答by Luca Detomi
Since Firefox 64, is possible to use new specsfor a simple Scrollbar styling (not as complete as in Chrome with vendor prefixes).
从Firefox 64 开始，可以使用新的规范来实现简单的滚动条样式（不像 Chrome 中那样完整，带有供应商前缀）。
In this exampleis 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):
在这个例子中，可以看到一个解决方案，它结合了不同的规则来解决 Firefox 和 Chrome 的问题，最终结果相似（不相等）（示例使用您的原始 Chrome 规则）：
The key rules are:
关键规则是：
For Firefox
火狐浏览器
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
For 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;
}
Please note that respect to your solution, is possible to use also simpler Chrome rules as the following:
请注意，对于您的解决方案，也可以使用更简单的 Chrome 规则，如下所示：
.scroller::-webkit-scrollbar-track {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb {
height: 30px;
background-color: #0A4C95;
}
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;
最后，为了在 Firefox 中也隐藏滚动条中的箭头，目前需要使用以下规则将其设置为“细”scrollbar-width: thin;
回答by human
Year 2020 this works
2020年这有效
/* Thin Scrollbar */
:root{
scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
scrollbar-width: thin !important;
}
回答by ipirlo
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
它以用户风格工作，似乎不适用于网页。我还没有找到 Mozilla 的官方指示。虽然它可能在某些时候起作用，但 Firefox 对此没有官方支持。此错误仍然打开https://bugzilla.mozilla.org/show_bug.cgi?id=77790
scrollbar {
/* clear useragent default style*/
-moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
-moz-appearance: none !important;
}
/* the sliding part*/
thumb{
-moz-appearance: none !important;
}
scrollcorner {
-moz-appearance: none !important;
resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
color:silver;
}
check http://codemug.com/html/custom-scrollbars-using-css/for details.
回答by ramme
@-moz-document url-prefix(http://),url-prefix(https://) {
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
scrollbarbutton {
display: none !important;
}
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
