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

当前回答

这个特性还处于实验阶段，我想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

其他回答

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

没有脚本，只有标准化的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

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

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

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

自定义CSS滚动条Firefox

推荐文章

最新文章

标签