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


当前回答

Firefox只接受:

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

其他回答

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

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

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

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

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

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

2021

火狐

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

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

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

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