我想用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来做，如果它是可行的。
当前回答
在这里，我已经尝试了所有主要浏览器的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> <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong> </section> <section id="pageContent"> <main role="main"> <article> <h2>Stet facilis ius te</h2> <p>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.</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>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.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>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.</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>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.</p> </article> </main> <aside> <div>Sidebar 1</div> <div>Sidebar 2</div> <div>Sidebar 3</div> </aside> </section> <footer> <p>© 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></p> <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)。
其他回答
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
我想我将分享我的发现，以防有人正在考虑使用jQuery插件来完成这项工作。
我给了jQuery自定义滚动条去。它非常漂亮，可以进行一些平滑的滚动(具有滚动惯性)，并具有大量可以调整的参数，但对我来说，它的CPU消耗太大了(并且它向DOM添加了相当多的内容)。
现在我要试试完美滚动条。它简单且轻量级(6 KB)，到目前为止它做得还不错。它根本不是CPU密集型的(据我所知)，并且对DOM的添加非常少。它只有几个参数来调整(wheelSpeed和wheelPropagation)，但这是我所需要的，它处理更新滚动内容很好(如加载图像)。
附注:我确实快速看了一下JScrollPane，但@simone是对的，它现在有点过时了，而且是PITA。
.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;
}
简单的回答是:
只做以下工作
在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变量。 顺便说一下，属性的顺序并不重要。
