自定义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来做，如果它是可行的。

截至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

2011-05-29 01:49:28

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

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

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

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

2013-07-28 11:06:35

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

2013-07-31 15:52:29

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

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

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

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

jsfiddle.net/aj7bxtjz/1/

2015-05-26 17:19:39

自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;

2018-12-12 08:58:01

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"> 汽车 汽车 汽车 汽车 汽车 汽车 < / div > <div class="scroll - scroll-color-colors"> 颜色 颜色颜色 颜色颜色 颜色 < / 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"> autoautoautoautoautoauto </div> <div class="scroll scroll-width-thin"> thinthinthinthinthinthin </div> <div class="scroll scroll-width-none"> nonenonenonenonenonenone </div>

2019-01-08 23:09:58

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

2020-02-14 10:47:26

截至2021年，Firefox滚动条定制只有两个属性可用;滚动条颜色和滚动条宽度。

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"> some scroll text... don't you dare scroll to the bottom... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... still here? fair warning, do NOT scroll farther down! some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... STOP! some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... NOW I'M MAD some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... AND THAT IS GENERALLY A BAD IDEA some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... bye some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... last last last warning; you will not like what is at the bottom some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... thare is nothing at the bottom! some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... some scroll text... NOTHING >:D </div>

HTML

<div class="demo">

CSS

.demo {
    overflow-y: scroll;
}

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

2020-07-01 14:27:44

在这里，我已经尝试了所有主要浏览器的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> Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address. </section> <section id="pageContent"> <main role="main"> <article> <h2>Stet facilis ius te</h2> 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. </article> <article> <h2>Illud mollis moderatius</h2> 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. </article> <article> <h2>Ex ignota epicurei quo</h2> 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. </article> <article> <h2>His at autem inani volutpat</h2> 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. </article> </main> <aside> <div>Sidebar 1</div> <div>Sidebar 2</div> <div>Sidebar 3</div> </aside> </section> <footer> © 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> <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-07-15 08:10:57

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

CSS

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

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

参考: 链接1 链接2

2021-04-13 13:53:02

Firefox只接受:

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

2021-06-30 16:57:56

2021

火狐

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

铬

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

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

2021-10-26 02:21:22

2022年

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

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

html { /*对于Firefox */ overflow-y:滚动; 滚动条-color: #008de4 #0d3b97; scrollbar-width:薄; ｝ /*用于Chrome和除Firefox之外的其他浏览器*/ 身体:-webkit-scrollbar { 宽度:0.5 em; background - color: # 0 d3b97; ｝身体:-webkit-scrollbar-thumb { background - color: # 008 de4; ｝ < html > <body style="height: 600px"></body> . < / html >

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

::-webkit-scrollbar-track

2022-01-20 11:03:00

简单的回答是:

只做以下工作

在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变量。顺便说一下，属性的顺序并不重要。

2022-01-29 20:58:33

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

2022-02-19 23:00:29

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

2022-05-14 16:12:39

自定义CSS滚动条Firefox

推荐文章

标签

最新文章