自定义CSS webkit滚动条在Firefox浏览器中不起作用

Question

这是我的小提琴：SCROLLBAR

在Chrome浏览器和Firefox浏览器中运行小提琴，点击“切换”按钮，查看自定义CSS未应用于Firefox浏览器中的滚动条。

有没有办法在所有浏览器中显示自定义滚动条？

::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 100px;
  border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: #c1bdbe;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #555D69;
}

任何帮助将非常感激。

谢谢。

Answer 1

Firefox不支持自定义滚动条，所以在css中无法做到这一点。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

您必须使用JavaScript在所有浏览器上具有全局样式。