自定义 Firefox 滚动条 - 边框半径

Question

我正在尝试修改浏览器滚动条的默认 CSS，它在 Chrome 和 Edge 上工作正常，但在 Firefox 中却不行。有什么方法可以修改firefox浏览器滚动条并使其与Chrome和Edge同步。目前我无法在 Firefox 中为滚动条提供边框半径。

我使用过的代码：

/* Custom Scroll Bar */

/* Works on Firefox */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #65676a #1e1f22 !important;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

*::-webkit-scrollbar-track {
  background: #1e1f22 !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #65676a !important;
  border-radius: 2rem !important;
  border: 0.3rem solid #1e1f22 !important;
}

*::-webkit-scrollbar-corner {
  background: #1e1f22 !important;
}

另外，我正在使用 Angular Framework，如果有任何 Angular 库可以修改滚动条，请分享。我尝试过 ngx-scrollbar 但遇到一些构建问题。

Answer 1

在 Firefox 中使用 css 无法实现这一点。

它将忽略这些::-webkit属性，因为它不使用 webkit。基于 Chromium 的浏览器接受它，因为它们使用基于 webkit 的 Blink 引擎。

Gecko（Firefox 的渲染引擎）仅接受您已列出的两个标准属性：scrollbar-width和scrollbar-color。

您最好的选择（如果这是绝对要求）是使用非本机滚动条替换。就我个人而言，我认为这些带来的问题多于带来的好处，但要选择你的毒药。示例可能是完美的滚动条，但我确信如果您搜索的话还有更多。