适用于Firefox的自定义CSS滚动条

Question

我想用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。

非常感谢某人的专家建议！

Answer 1

截至2018年底，Firefox现在提供的定制有限！

请参阅以下答案：

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

这是背景信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

---

没有相当于::-webkit-scrollbar和朋友的Firefox。

你必须坚持使用JavaScript。

很多人都希望看到此功能，请参阅：https://bugzilla.mozilla.org/show_bug.cgi?id=77790

---

就JavaScript替换而言，您可以尝试：

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane（但它过时了，显然是PITA ......）

Answer 2

我可以提供替代方案吗？

没有任何脚本，只有标准化的CSS风格和一点点创造力。简短回答 - 屏蔽现有浏览器滚动条的部分内容，这意味着您可以保留所有功能。

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

有关演示和更深入的解释，请点击此处...

jsfiddle.net/aj7bxtjz/1/

Answer 3

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

我给了JQuery Custom Scrollbar一个去。它非常华丽，并且有一些平滑的滚动（滚动惯性）并且有大量的参数你可以调整，但它最终对我来说有点CPU密集（并且它为DOM增加了相当多的数量）。

现在我要给Perfect Scrollbar一个去。它简单轻巧（6KB），到目前为止它做得不错。它根本不是CPU密集型的（据我所知）并且对DOM的贡献很少。它只有两个参数来调整（wheelSpeed和wheelPropagation），但这只是我需要的，它可以很好地处理滚动内容的更新（例如加载图像）。

P.S。我确实快速浏览了JScrollPane，但是@simone是对的，它现在有点过时和PITA。

Answer 4

Firefox 64增加了对规范草案CSS Scrollbars Module Level 1的支持，该规范草案增加了two new properties和scrollbar-width中的scrollbar-color，从而可以控制滚动条的显示方式。

您可以将scrollbar-color设置为以下值之一（来自MDN的描述）：

• auto在没有其他相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染。
• dark显示深色滚动条，它可以是平台提供的深色滚动条，也可以是深色的自定义滚动条。
• light显示一个浅色滚动条，它可以是平台提供的滚动条的浅色变体，也可以是具有浅色的自定义滚动条。
• <color> <color>将第一种颜色应用于滚动条滑块，将第二种颜色应用于滚动条轨道。

请注意，dark和light的值是are not currently implemented in Firefox。

macOS注释：

macOS默认的自动隐藏半透明滚动条不能使用此规则着色（它们仍会根据背景选择自己的对比色）。仅永久显示的滚动条（系统偏好设置>显示滚动条>始终）是彩色的。

视觉演示：

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

您可以将scrollbar-width设置为以下值之一（来自MDN的描述）：

• auto平台的默认滚动条宽度。
• thin在提供该选项的平台上，滚动条宽度较薄，或者滚动条的宽度比默认平台宽度更薄。
• none没有显示滚动条，但是该元素仍可滚动。

您还可以根据规格设置特定的长度值。 thin和特定长度都可能无法在所有平台上执行任何操作，而确切执行的操作是特定于平台的。特别是，Firefox当前似乎不支持特定的长度值（this comment on their bug tracker seems to confirm this）。 thin键盘似乎确实得到了很好的支持，而macOS和Windows至少支持该功能。

可能值得注意的是，在将来的草稿中将考虑删除length值选项和整个scrollbar-width属性，如果发生这种情况，则可能在将来的版本中将其从Firefox中删除。

视觉演示：

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Answer 5

到2020年这项工作

TrucksScreen.navigationOptions = {
    headerTitle: 'Trucks Screen',
    headerLeft: () => {
      return null;
    },
};

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Answer 6

自Firefox 64起，就可以将new specs用于简单的滚动条样式（不如带有厂商前缀的Chrome完整）。

在this example中可以看到一个解决方案，该解决方案结合了不同的规则以解决Firefox和Chrome的最终结果类似（不相等）的情况（例如，使用您原来的Chrome规则）：

关键规则是：

对于Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

对于Chrome

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

请注意，关于您的解决方案，可以使用以下更简单的Chrome规则：

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

最后，为了在Firefox中也隐藏滚动条中的箭头，当前必须使用以下规则scrollbar-width: thin;

将其设置为“ thin ”

Answer 7

截至目前，firefox滚动条自定义只有两个属性。

滚动条颜色和滚动条宽度

滚动条颜色：红色黄色； （曲目，缩略图） scrollbar-width：5px;

HTML

<div class="demo">

css

.demo {
overflow-y:scroll;
}

.demo {
scrollbar-color:red yellow;
scrollbar-width:5px;
}

Answer 8

在这里，我已经为所有主流浏览器尝试了此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&nbsp;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>&copy; 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>

Answer 9

这个功能是大量实验性的，我想 Mozilla 有很多工作要做，直到它在每个页面上对每个人都可用。我已经测试了许多解决方案，但以下代码运行良好。

CSS

:root {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

或

#ClassName {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

参考： LINK 1 LINK 2

Answer 10

它以用户风格工作，似乎不适用于网页。我还没有找到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/了解详情。

Answer 11

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}

Answer 12

Firefox 只接受：

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