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

当前回答

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

其他回答

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

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

简单的回答是:

只做以下工作

在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

Firefox只接受:

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

2021-06-30 16:57:56

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

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

自定义CSS滚动条Firefox

推荐文章

最新文章

标签