Firefox 上的样式滚动条。如何摆脱滚动条上的黑色 border/outline？

Question

这是我用来设置垂直滚动条样式的 CSS。

overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #COLOR_1;
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: #COLOR_2;
    border-radius: 2px;
  }
    ::-webkit-scrollbar-thumb:hover {
    background: #COLOR_2;
  }
  scrollbar-color: ${props => "#COLOR_2" + " " + "#COLOR_1"};
  scrollbar-width: thin;

这是我期望的结果（适用于 Chrome）：

这是我在 Firefox 上得到的：

如何去除黑线？

它从顶部一直到底部。

Answer 1

我经历过同样的事情，受到你的评论的启发，我做了更多的挖掘。

这似乎是 bug within Firefox。屏幕截图附在该错误上，显示滚动条周围有类似的黑色轮廓，就像您在设置 scrollbar-color 时遇到的那样。这似乎只是 Windows Firefox 的问题。

已推送一个修复程序，似乎计划在 Firefox 85 中发布。

有一条评论包含变通方法：“如果您在 about:config 中设置 widget.disable-native-theme-for-content=true 并刷新”，OP 表示已修复该问题，但如果您的应用面向 public不会有太大帮助。我在我的网站上尝试了这个解决方法，但效果不佳，它删除了黑色轮廓，但在滚动条的顶部和底部添加了一些彩色像素（我相信它与 up/down 按钮有关，这些按钮被 scrollbar-width: thin)

另一个解决方法是不设置 scrollbar-color 并且黑色轮廓应该会消失，尽管这不是理想的解决方案当 Chrome 在更改滚动条颜色以匹配您网站的主题时可以正常工作.

Firefox 上的样式滚动条。如何摆脱滚动条上的黑色 border/outline？

Styling scroll bar on Firefox. How to get rid of black border/outline on scroll bar?

html

css

firefox

scrollbar