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 来做到这一点。

原文由 Dimitri Vorontzov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

---

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

你必须坚持使用 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

原文由 thirtydot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Firefox 64 添加了对规范草案 CSS Scrollbars Module Level 1 的支持，它添加了 两个新属性 scrollbar-width 和 scrollbar-color 可以控制滚动条的显示方式。

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

• auto 在没有任何其他相关滚动条颜色属性的情况下，滚动条轨道部分的默认平台渲染。
• <color> <color> 将第一种颜色应用于滚动条滑块，将第二种颜色应用于滚动条轨道。

以前的规范包括 dark 和 light 没有在 Firefox 中实现的 值。这些值已从规范中删除。

在带有移动 Firefox 的库存 Android 上，拇指可以着色，但没有轨道可以着色。

此外，在 99.0 之前的 macOS Firefox 版本中，这些规则无法设置 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 目前似乎不支持特定的长度值（ 他们的错误跟踪器上的评论似乎证实了这一点）。然而， thin keywork 似乎得到了很好的支持，至少支持 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>

原文由 Alexander O‘Mara 发布，翻译遵循 CC BY-SA 4.0 许可协议