Firefox 上的样式滚动条。如何摆脱滚动条上的黑色边框/轮廓？

Posted 2023-03-06

【中文标题】Firefox 上的样式滚动条。如何摆脱滚动条上的黑色边框/轮廓？

【英文标题】：Styling scroll bar on Firefox. How to get rid of black border/outline on scroll bar?

【发布时间】：2021-02-23 08:22:56

【问题描述】：

这是我用来设置垂直滚动条样式的 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 上得到的：

如何去掉黑线？

它从上到下一直到底部。

【问题讨论】：

您能找到解决方案吗？刚刚在我们的应用程序中注意到 - 我认为这是由设置 `scrollbar-color 引起的 FF 错误，但很好奇是否存在现有的错误报告。

抱歉，我还没有时间尝试任何解决方案。到目前为止，我只是顺其自然。如果您发现了什么，请在此处回答！

【参考方案1】：

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

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

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

有一条评论包含一个解决方法：“如果你在about:config 中设置widget.disable-native-theme-for-content=true 并刷新”，OP 说修复了它，但如果你的应用程序是面向公众的，那将没有多大帮助。我为我的网站尝试了这种解决方法，但效果不佳，它删除了黑色轮廓，但在滚动条的顶部和底部添加了一些彩色像素（我相信它与 scrollbar-width: thin 隐藏的向上/向下按钮有关)

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