自定义CSS滚动条Firefox

我想用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来做，如果它是可行的。

630983 次浏览
小开
最佳答案

截至2018年底，Firefox现在有有限的定制功能!

请看这些答案:

  • https://stackoverflow.com/a/54101063/405015 < a href = " https://stackoverflow.com/a/54101063/405015 " > < / >
  • https://stackoverflow.com/a/53739309/405015 < a href = " 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替换而言，你可以尝试:

小开

我想我将分享我的发现，以防有人正在考虑使用jQuery插件来完成这项工作。

我给了jQuery自定义滚动条一个尝试。它非常漂亮，可以进行一些平滑的滚动(具有滚动惯性)，并具有大量可以调整的参数，但对我来说，它的CPU消耗太大了(并且它向DOM添加了相当多的内容)。

现在我开始使用完美的滚动条。它简单且轻量级(6 KB)，到目前为止它做得还不错。它根本不是CPU密集型的(据我所知)，并且对DOM的添加非常少。它只有几个参数来调整(wheelSpeed和wheelPropagation)，但这是我所需要的，它处理更新滚动内容很好(如加载图像)。

附注:我确实快速看了一下JScrollPane，但@simone是对的，它现在有点过时了，而且是PITA。

小开

它在用户风格中起作用，但在网页中似乎不起作用。我还没有从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;
}

详细信息请查看http://codemug.com/html/custom-scrollbars-using-css/。

小开

我可以提供另一种选择吗?

没有脚本，只有标准化的css样式和一点点创意。简单的回答——屏蔽现有浏览器滚动条的部分，这意味着你保留了它的所有功能。

.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}

要获得演示和更深入的解释，请查看这里…

jsfiddle.net/aj7bxtjz/1/

小开

由于火狐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;将其设置为“薄”

小开

Firefox 64增加了对规范草案CSS滚动条模块级别1的支持，该规范草案增加了scrollbar-width和scrollbar-color中的两个新属性，从而对滚动条的显示方式进行了一些控制。

你可以将scrollbar-color设置为以下值之一(来自MDN的描述):

  • auto滚动条轨道部分的默认平台呈现，在没有任何其他相关滚动条颜色属性的情况下。
  • <color>将第一种颜色应用于滚动条的拇指，第二种颜色应用于滚动条的轨道。

以前，规范包括dark和light值。这些值已经从规范中删除了。

在带有移动Firefox的Android上，拇指可以着色，但没有着色的轨迹。

此外，在99.0之前的macOS Firefox版本中，macOS默认的自动隐藏半透明滚动条不能按这些规则设置样式。从Firefox 99.0开始，所有macOS滚动条模式(在System Preferences >显示滚动条)可以着色。

视觉演示:

.scroll {
width: 20%;
height: 100px;
border: 1px solid grey;
overflow: scroll;
display: inline-block;
}
.scroll-color-auto {
scrollbar-color: auto;
}
.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-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

你可以将scrollbar-width设置为以下值之一(来自MDN的描述):

  • auto平台的默认滚动条宽度。
  • thin提供该选项的平台上的薄滚动条宽度变体，或比默认平台滚动条宽度更薄的滚动条。
  • none没有显示滚动条，但是元素仍然是可滚动的。

你也可以根据规范设置一个特定的长度值。thin和一个特定的长度可能不是在所有平台上都做任何事情，它具体做什么是平台特定的。特别是，Firefox目前似乎不支持特定的长度值(关于他们的漏洞追踪器的评论似乎证实了这一点)。然而，thin键工作似乎得到了很好的支持，至少macOS和Windows支持。

在Android和移动Firefox上，auto宽度拇指已经相当薄了，而thin并没有使它更薄。

可能值得注意的是，长度值选项和整个scrollbar-width属性正在考虑在未来的草案中删除，如果发生这种情况，这个特定的属性可能会在未来的版本中从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>

小开

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

小开

截至2021年，Firefox滚动条定制只有两个属性可用;scrollbar-color和scrollbar width。

scrollbar-color: red yellow; /* track thumb */
scrollbar-width: 5px; /* none, thin, or auto */


.demo {
overflow-y: scroll;
}


.demo {
scrollbar-color: red yellow;
scrollbar-width: 10px;
}
<div class="demo">
<p>
some scroll text...<br><br> don't you dare scroll to the bottom...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some
scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> still here? fair warning, do
NOT scroll farther down!<br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> STOP!
<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOW I'M MAD<br><br> some
scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> AND THAT IS GENERALLY A BAD IDEA<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> bye
<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br&g
t; some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...
<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    last last last warning; you will not like what is at the bottom<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
text...<br><br> some scroll text...<br><br> thare is nothing at the bottom!<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text..
.<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>
some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOTHING >:D
</p>
</div>

超文本标记语言

<div class="demo">

CSS

.demo {
overflow-y: scroll;
}


.demo {
scrollbar-color: red yellow;
scrollbar-width: 5px;
}
小开

在这里，我已经尝试了所有主要浏览器的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&nbsp;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>&copy; 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>

< p >关键字的值 scrollbar-width: |汽车|薄没有;< / p > < p >全球价值观 scrollbar-width:继承初始| |回复| revert-layer; scrollbar-width:设置;< / p >

Firefox 84于2020年12月15日发布。已删除的属性如下:

删除了专有的-moz-default-appearance属性值scrollbar-small(使用scrollbar-width: thin代替)和scrollbar(仅macOS;scrollbar-horizontal和scrollbar-vertical被使用)(错误1673132)。

小开

这个特性还处于实验阶段，我想Mozilla还有很多工作要做，直到它对每个页面上的每个人都可用为止。我已经测试了许多解决方案，但下面的代码工作得很完美。

CSS

:root {
scrollbar-color: #333333 #999999 !important;
scrollbar-width: thin !important;
}

或

#ClassName {
scrollbar-color: #333333 #999999 !important;
scrollbar-width: thin !important;
}

< >强引用: LINK 1 链接2 < / p >

小开

Firefox只接受:

scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
小开

2021

火狐

.nav{
scrollbar-width: 0px;
scrollbar-width: none;}

铬

::-webkit-scrollbar {
height: 0;  /* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}

对于垂直和水平滚动条，更改宽度或高度属性

小开

2022年

使用最新的Firefox和Chrome版本进行测试

下面的代码片段将在Chrome和Firefox上显示相同的滚动条样式，尝试一下。

html {
/* For Firefox */
overflow-y: scroll;
scrollbar-color: #008de4 #0d3b97;
scrollbar-width: thin;
}


/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
width: 0.5em;
background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
background-color: #008de4;
}
<html>
<body style="height: 600px"></body>
</html>

还可以使用以下方法自定义滚动条跟踪(但不适用于Firefox)

::-webkit-scrollbar-track
小开

简单的回答是:

只做以下工作

在firefox (截至2022年1月)中:

：

< span style=" font - family:宋体;">属性(不是伪元素!) < span style=" font - family:宋体;"> < / th > < span style=" font - family:宋体;"< / th > >允许值 < span style=" font - family:宋体;"> scrollbar-width td > < / < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;">thin(实际上非常薄) < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;">auto(标准厚版本) < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;">none(隐藏滚动条) . > < span style=" font - family:宋体;"> scrollbar-color td > < / < span style=" font - family:宋体;"> < / td > < span style=" font - family:宋体;"> color color td > < /

：

你必须设置两个颜色值，第一个滚动条拇指， 第二，滚动条背景。 它取任何正常的颜色值，使用像"black"这样的名称，像"#000000"这样的十六进制值，像"rgb(0,0,0)这样的函数，以及像" var(——先前定义的black)"这样的变量。 但是它不采用线性梯度作为输入，既不正常也不通过css变量。 顺便说一下，属性的顺序并不重要
小开

这适用于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

小开 
.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;
}

提交答案