html - mozilla 中的滚动条

Question

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

昨天，我开始使用 Mozilla Firefox，我发现滚动条是可见的，而 .sidebar_menu::-moz-scrollbar {display: none;} 不起作用。老实说，这让我很害怕，因为我看不出有什么办法可以摆脱这种情况。我只是希望它在 chrome 和 Mozilla 中是一样的。至少这个滚动条。

Answer 1

自 Firefox 64 , 可以使用 new specs用于简单的滚动条样式(不像带有供应商前缀的 Chrome 中那样完整)。

在this example有可能看到一个解决方案，它结合了不同的规则来解决 Firefox 和 Chrome 具有相似(不相等)的最终结果:

主要规则是:

适用于 Firefox

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

对于 Chrome

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

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

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

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