火狐自定义CSS滚动条

Question

火狐自定义CSS滚动条

429

我想用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实现。

- Dimitri Vorontzov

2

请分享如何使用jQuery解决此问题。我面临着同样的问题，但是使用CSS来解决了Webkit的问题。然而，Firefox存在一个问题，您的jQuery解决方案可能有助于解决它。 - Igbanam

1

我建议使用jscrollpane jQuery插件。 - Dimitri Vorontzov

1

不是真的。如果你有那个，说明你在某个地方做错了什么。 - Dimitri Vorontzov

请查看我的答案：http://stackoverflow.com/questions/7357203/custom-scrollbars/32424642#32424642 - Buzinas

我添加了一个解决方案概述：https://dev59.com/7m025IYBdhLWcg3wLivo#70909679。为什么这么多人使用jQuery呢;) - LuckyLuke Skywalker

显示剩余2条评论

16个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nativelectronic · Answer 1

2021

火狐浏览器

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

谷歌浏览器

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

要更改垂直和水平滚动条，请更改宽度或高度属性。

- LuckyLuke Skywalker · Answer 2

简短回答：

仅适用于以下工作

在火狐浏览器中（截至2022年1月）：

:

属性（不是伪元素！）		允许的值
`scrollbar-width`		`thin`（实际上非常细）
		`auto`（标准粗度版本）
		`none`（隐藏滚动条）
`scrollbar-color`		`color color`

:

您必须设置两个颜色值，首先是滚动条拇指，其次是滚动条背景。 它接受任何普通的颜色值，使用名称如“黑色”，十六进制值如“＃000000”，函数如“rgb（0,0,0）”，以及变量如“var（- - previouslydefinedblack）”。但它不接受线性渐变作为输入，无论是正常的还是通过CSS变量。顺序无关紧要。

- Figar Ali · Answer 3

这个功能目前还处于实验阶段，我想Mozilla需要做很多工作才能使其在每个页面上都可用。我测试了许多解决方案，但以下代码运行得非常完美。

CSS

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

或者

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

参考资料: 链接 1 链接 2

- Adam · Answer 4

这适用于WordPress的自定义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

- Rayan Lakhdar · Answer 5

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

- ipirlo · Answer 6

它在用户样式下可以工作，但似乎在网页中不起作用。我没有从 Mozilla 官方找到有关此问题的指导。尽管它可能在某个时候曾经工作过，但 Firefox 并没有官方支持。这个 Bug 仍然未被解决 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/了解详情。