我想用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来做，如果它是可行的。
当前回答
在这里，我已经尝试了所有主要浏览器的CSS和测试:自定义颜色在滚动条上工作良好。
是的，不同浏览器的几个版本都有限制。
/* Only Chrome */ html::-webkit-scrollbar {width: 17px;} html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;} html::-webkit-scrollbar-track {background-color: #8ea5b5; } ::-webkit-scrollbar-button {background-color: #8ea5b5;} /* Only IE */ html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;} /* Only FireFox */ html {scrollbar-color: #0064a7 #8ea5b5;} /* View Scrollbar */ html {overflow-y: scroll;overflow-x: hidden;} <!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div id="logo"><img src="/logo.png">HTML5 Layout</div> <nav> <ul> <li><a href="/">Home</a> <li><a href="https://html-css-js.com/">HTML</a> <li><a href="https://html-css-js.com/css/code/">CSS</a> <li><a href="https://htmlcheatsheet.com/js/">JS</a> </ul> </nav> </header> <section> <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong> </section> <section id="pageContent"> <main role="main"> <article> <h2>Stet facilis ius te</h2> <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p> </article> </main> <aside> <div>Sidebar 1</div> <div>Sidebar 2</div> <div>Sidebar 3</div> </aside> </section> <footer> <p>© You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p> <address> Contact: <a href="mailto:me@example.com">Mail me</a> </address> </footer> </body> </html>
关键字值 scrollbar-width: |汽车|薄没有;
全局值 scrollbar-width:继承初始| |回复| revert-layer; scrollbar-width:设置;
Firefox 84于2020年12月15日发布。已删除的属性如下:
删除了专有的-moz-default-appearance属性值scrollbar-small(使用scrollbar-width: thin代替)和scrollbar(仅macOS;使用水平滚动条和垂直滚动条)(bug 1673132)。
其他回答
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
Firefox只接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
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>
自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;
这适用于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
