logo标签列表

火狐自定义CSS滚动条

cssfirefoxwebkitscrollbar
429

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

2
请分享如何使用jQuery解决此问题。我面临着同样的问题，但是使用CSS来解决了Webkit的问题。然而，Firefox存在一个问题，您的jQuery解决方案可能有助于解决它。 - Igbanam
1
我建议使用jscrollpane jQuery插件。 - Dimitri Vorontzov
1
不是真的。如果你有那个，说明你在某个地方做错了什么。 - Dimitri Vorontzov
请查看我的答案：http://stackoverflow.com/questions/7357203/custom-scrollbars/32424642#32424642 - Buzinas
我添加了一个解决方案概述：https://dev59.com/7m025IYBdhLWcg3wLivo#70909679。为什么这么多人使用jQuery呢;) - LuckyLuke Skywalker
显示剩余2条评论
16个回答
288
截至2018年底，现在Firefox中有了有限的自定义选项！请参见以下答案：
并且可以查看此处的背景信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Firefox没有相应于::-webkit-scrollbar和类似内容的等效物。
您将不得不使用JavaScript。
许多人都想要这个功能，请参见：https://bugzilla.mozilla.org/show_bug.cgi?id=77790
就JavaScript替代选项而言，您可以尝试：
2
谢谢，ThirtyDot。不过我有一个问题：-moz-appearance:scrollbartrack-vertical和其他相关的CSS扩展怎么样？也许它们可以以某种方式使用？ - Dimitri Vorontzov
2
很抱歉，-moz-appearance 的所有可能值都无法帮助。"-moz-appearance CSS 属性在 Gecko (Firefox) 中用于显示元素，使用基于操作系统主题的本地平台样式。" - 你只会得到一个本地滚动条。 - thirtydot
18
以防读者需要实用的解决方案，我最终使用了jscrollpane jQuery插件。 - Dimitri Vorontzov
1
@JacquesMathieu，我明白你的意思。虽然这不是Baron的错，但如果我下载页面并阻止Baron初始化，错误仍会发生。因此看起来Chrome在这里有问题。 - thephpdev
3
https://drafts.csswg.org/css-scrollbars-1/ 是规范的第一阶段，但现在默认情况下已经在Firefox Nightly中启用。 - wegry
显示剩余11条评论
127
Firefox 64增加了对CSS滚动条模块1级规范草案的支持，该规范添加了两个新属性：scrollbar-width和scrollbar-color，可在一定程度上控制滚动条的显示。
可以将scrollbar-color设置为以下值（来自MDN的描述）：
  • auto 默认平台呈现滚动条轨道部分，在没有其他相关滚动条颜色属性的情况下。
  • <color> <color> 将第一个颜色应用于滚动条拇指，第二个颜色应用于滚动条轨道。
先前的规范包括dark和light值，但在Firefox中未实现。这些值已从规范中删除。
在具有移动Firefox的原始Android上，拇指可以着色，但没有轨道可以着色。
此外，在 macOS Firefox 99.0 之前的版本中，这些规则无法为 macOS 默认的自动隐藏半透明滚动条进行样式设置。从 Firefox 99.0 开始，所有 macOS 滚动条模式（在“系统偏好设置”>“显示滚动条”下配置）都可以着色。
视觉演示： 

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.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-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似乎目前不支持特定长度值（他们bug追踪器上的此评论似乎证实了这一点）。但是，thin关键字似乎得到了很好的支持，至少macOS和Windows支持。
在移动Firefox中，使用原始Android，auto宽度拇指已经非常窄，thin不会使其变窄。
值得注意的是，长度值选项和整个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>

1
感谢您的回答。我已经更新了我的采纳答案，以提升这个（和其他相关）答案的排名，使更多人可以看到它。 - thirtydot
1
这基本上是三周前Luca的回答的复制。 - vhs
1
@JoshHabdas 这个答案没有包含足够的兼容性或使用信息。我创建了这个答案，因为其他答案没有我正在寻找的重要信息。 - Alexander O'Mara
1
你可以给他们点赞，提出反馈或考虑编辑他们的答案。 - vhs
2
@JoshHabdas 嗯，已经有5个人发现它很有用了，而且它包含了其他任何地方都找不到的信息，所以我不同意。 - Alexander O'Mara
显示剩余7条评论
71

自从Firefox 64，可以使用新规范来进行简单的滚动条样式设计（不像Chrome那样完整并带有供应商前缀）。

在这个例子中，可以看到一种解决方案，结合不同的规则来处理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中隐藏滚动条中的箭头，目前需要使用以下规则将其设置为"thin"：scrollbar-width: thin;

5
看起来 IE 5.5 终究还是做对了某些事情。 :) - vhs
44

我能提供一个替代方案吗？

完全不需要脚本，只使用标准化的CSS样式和一点创意。简短地说，是遮盖现有浏览器滚动条的某些部分，这意味着您仍然保留它的所有功能。

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

了解更多演示和深入解释，请查看以下链接...

jsfiddle.net/aj7bxtjz/1/

9
很遗憾，这并没有回答问题。Dimitri试图设计滚动条的样式，而不是隐藏它。 - stvnrynlds
20
那是4年前的事情（我知道），所以我相信他现在已经采取了一些行动。但是这个话题今天仍然很重要 - 虽然其他浏览器允许某些类型的“非法”修改滚动条，但FF不允许。这就是为什么我决定发帖的原因。前端结果是对滚动条进行视觉样式处理，而不管做法是否隐藏了部分内容。 - Tomaz
我喜欢这个解决方案，除了所有额外的标记和绝对定位（使可变大小的内容成为噩梦），而且你实际上不能改变样式，你只是掩盖/隐藏现有滚动条的元素 - 如果我想要一个绿色的条，那就太糟糕了！ - RozzA
4
是的，在四年后，重点不在于回答楼主的问题，而在于为社区做出贡献。 - tmthyjames
3
问题的本质是一些渲染引擎提供的解决方案不符合标准。这是最能够解答我的疑虑的问题，也是我一直在寻找的答案。 - Filip Dupanović
很不幸，这是一个靠不住的解决方案，因为你已经硬编码了滚动条的大小，而这可能会因为辅助功能设置等原因而发生变化。 - vhs
39
好消息，但我们如何改变大纲？ - AbeIsWatching
这个适用于WordPress，谢谢<3 - Adam
36

我想分享一下我的发现，以防有人考虑使用jQuery插件来完成这个工作。

我试用了jQuery自定义滚动条。它非常复杂，可以实现平滑滚动（带有滚动惯性），而且有很多参数可以调整，但是它对CPU的占用比较高（并且会在DOM中添加相当多的内容）。

现在我正在试用完美滚动条。它简单轻便（仅6 KB），目前表现不错。它没有对CPU的占用，只添加了少量的内容到你的DOM中。它只有几个参数可供调整（wheelSpeed和wheelPropagation），但这已经足够了，它可以很好地处理滚动内容的更新（如加载图像）。

P.S. 我曾经简要查看过JScrollPane，但是@simone是对的，它现在有点过时了，并且让人感到麻烦。

3
还有一个触摸板滚动模拟器 -- 这是twitch.tv使用的。 - forivall
1
Perfect Scrollbar实际上非常好用。在尝试了许多其他选项之后，我发现它是最好的解决方案。感谢您的建议。 - Leonard Teo
nanoScroller也非常好，而且相对较为精简。 https://jamesflorentino.github.io/nanoScrollerJS/ 与重型JS插件相反，这个插件只是隐藏了原生滚动条，并使用本地的“scroll”事件显示替代滚动条。 - Danny R
1
我一直避免使用所有的jQuery解决方案，因为它们在较慢或压力较大的机器上都会出现延迟，但PS看起来很不错。 - RozzA
8

2022年

已用最新版本的Firefox与Chrome测试验证

以下代码片段将在Chrome和Firefox上显示相同的滚动条样式，请尝试。

html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #008de4 #0d3b97;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
    background-color: #008de4;
}
<html>
<body style="height: 600px"></body>
</html>

您还可以使用以下方法自定义滚动条轨道（但它不适用于 Firefox）：

::-webkit-scrollbar-track
1
但是仍然有一些需要从Firefox方面改进的地方。例如，当您具有溢出内容时，滚动条会出现在控件内部。这会影响内部元素的宽度，在Chrome中，控件大小将保持不变，而滚动条将添加到控件的边缘。 - Naredla Nithesh Reddy
6

我尝试了这个 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>

关键字值 scrollbar-width: auto|thin|none;

全局值 scrollbar-width: inherit|initial|revert|revert-layer; scrollbar-width: unset;

Firefox 84于2020年12月15日发布。摒弃的属性值如下：

已移除的专有 -moz-default-appearance 属性值 scrollbar-small（使用 scrollbar-width: thin 替代）以及 scrollbar（仅适用于 macOS；使用 scrollbar-horizontal 和 scrollbar-vertical 替代）（bug 1673132）。

6
截至2021年，Firefox仅支持两个滚动条自定义属性：scrollbar-color和scrollbar-width。
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">
  <p>
    some scroll text...<br><br> don't you dare scroll to the bottom...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> still here? fair warning, do
    NOT scroll farther down!<br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> STOP!
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOW I'M MAD<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> AND THAT IS GENERALLY A BAD IDEA<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> bye
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    last last last warning; you will not like what is at the bottom<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> thare is nothing at the bottom!<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOTHING >:D
  </p>
</div>

HTML

<div class="demo">

CSS（层叠样式表）
.demo {
    overflow-y: scroll;
}

.demo {
    scrollbar-color: red yellow;
    scrollbar-width: 5px;
}
3
scrollbar-width 属性仅支持三个值：none、thin和 auto - https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width - ivanjermakov
正确的顺序是（拇指，轨迹），而不是（轨迹，拇指）。 - Ahmed Taha
滚动条在元素内的位置会影响内部元素的宽度。当滚动条出现时，它将占用15像素。这使得当我们将溢出设置为自动时，内部元素的宽度相关样式不一致。 :( - Naredla Nithesh Reddy
2

Firefox只支持以下内容：

scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接