Question

我一直在使用铬是我生命中最长的一段时间。当我创建我的网站并想要隐藏出现在侧边栏菜单中的滚动条时，我在CSS中使用了overflow: auto;，然后使用了.sidebar_menu::-webkit-scrollbar {display: none;}。所以没有可见的滚动条，我可以用鼠标滚轮滚动侧边栏菜单。

昨天，我开始使用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还使用了其他样式来改善最终样式（例如圆角和阴影）

Answer 2

我相信Firefox不支持-webkit-scrollbar。虽然你可以找到javascript库，它们可以满足你的需要。

Answer 3

无法修改滚动条（通常）。这取决于浏览器处理它的样子。

但是，由于供应商前缀，您可以这样做。这些是您使用的针对特定浏览器的前缀，例如

-o- for Opera
-moz-适用于Mozilla
-webkit-适用于Safari，Chrome，Android ......
-ms-适用于IE和Edge

你是正确的尝试它，不幸的是，没有相应的Mozilla。您可以 take a look at this topic 尝试找到解决方案，但老实说，您应该放弃，几乎没有人注意到这一点......

Answer 4

如果有人偶然发现了这个问题，您可以使用以下方法在Firefox中轻松实现相同的效果：

.sidebar_menu {
    overflow: auto;
    scrollbar-width: none; /* hide the scrollbar in FF */
}

如其他答案所述，FF当前仅支持scrollbar-width: thin|none和scrollbar-color: #fgcolor #bgcolor，没有任何伪CSS选择器或供应商前缀。跨浏览器的解决方案是：

 /* Hide scrollbar for Chrome, Safari and Opera */
.sidebar_menu::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar_menu {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

Mozilla中的滚动条

4 个答案: