Mozilla 中的滚动条

Question

我使用 chrome 的时间最长。当我制作我的网站并想隐藏出现在我的侧边栏菜单中的滚动条时，我只是overflow: auto;在 CSS 中使用，然后.sidebar_menu::-webkit-scrollbar {display: none;}. 所以没有可见的滚动条，我可以用鼠标滚轮滚动侧边栏菜单。

昨天，我开始使用 Mozilla Firefox，我意识到滚动条是可见的，并且.sidebar_menu::-moz-scrollbar {display: none;}不起作用。老实说，这让我感到害怕，因为我找不到摆脱这种情况的方法。我只是希望它在 chrome 和 Mozilla 中是一样的。至少这个滚动条的东西。

Answer 1

从Firefox 64 开始，可以使用新的规范来实现简单的滚动条样式（不像 Chrome 中那样完整，带有供应商前缀）。

在这个例子中可以看到一个解决方案，它结合了不同的规则来解决 Firefox 和 Chrome 的问题，最终结果相似（不相等）：

关键规则是：

火狐浏览器

.scroller {
  overflow-y: scroll;
  scrollbar-color: red green;
  scrollbar-width: thin;
}

铬

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

.scroller::-webkit-scrollbar
{
    width: 8px;
    background-color: #F5F5F5;
}

.scroller::-webkit-scrollbar-thumb
{
    background-color: red;
}

在链接的示例中，还使用了 Chrome 的其他样式来改进最终样式（例如圆角和阴影）