css - 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

---

没有 Firefox 等同于 ::-webkit-scrollbar 和 friend 。

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