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

当前回答

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

其他回答

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

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

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

2021

火狐

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

铬

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

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

2021-10-26 02:21:22

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

2013-07-31 15:52:29

在这里，我已经尝试了所有主要浏览器的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> Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address. </section> <section id="pageContent"> <main role="main"> <article> <h2>Stet facilis ius te</h2> 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. </article> <article> <h2>Illud mollis moderatius</h2> 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. </article> <article> <h2>Ex ignota epicurei quo</h2> 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. </article> <article> <h2>His at autem inani volutpat</h2> 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. </article> </main> <aside> <div>Sidebar 1</div> <div>Sidebar 2</div> <div>Sidebar 3</div> </aside> </section> <footer> © 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> <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)。

2020-07-15 08:10:57

自定义CSS滚动条Firefox

推荐文章

最新文章

标签