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

Posted 2023-03-06

【中文标题】自定义 CSS webkit 滚动条在 Firefox 浏览器中不起作用

【英文标题】：Custom CSS webkit scrollbar is not working in Firefox brwoser

【发布时间】：2018-03-23 12:09:09

【问题描述】：

这是我的小提琴：SCROLLBAR

在 Chrome 和 Firefox 浏览器中运行 fiddle，点击“切换”按钮查看自定义 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;

任何帮助将不胜感激。

谢谢。

【参考方案1】：

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

您必须使用 javascript 才能在所有浏览器上拥有全局样式。