CSS自定义滚动条仅在Chrome生效，如何适配其他浏览器？

你的问题很典型——你写的::-webkit-scrollbar系列伪元素是Webkit/Blink内核浏览器（Chrome、Chromium版Edge、Safari）的私有实现，Firefox和其他非Webkit浏览器并不支持，所以才会出现只有Chrome生效的情况。下面是一套覆盖主流浏览器的兼容方案：

核心思路 #

我们需要结合标准CSS滚动条属性（适配现代浏览器）和浏览器私有前缀属性（适配Webkit/Firefox的特殊需求），既保证基础样式跨浏览器生效，又能保留精细的样式细节（比如滑块圆角）。

完整兼容代码 #

/* 标准CSS滚动条属性：适配Firefox 64+、Chrome 81+、Edge 81+ */
body {
  /* 控制滚动条宽度：thin=窄条，auto=默认，none=隐藏滚动条但保留滚动功能 */
  scrollbar-width: thin;
  /* 控制滑块和轨道颜色：[滑块颜色] [轨道颜色] */
  scrollbar-color: #59e5f6 black;
}

/* Webkit/Blink浏览器专属样式：Chrome、Safari、Chromium版Edge */
/* 滚动条整体 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度（可选） */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: black;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #59e5f6;
  border-radius: 10px; /* 滑块圆角，标准属性暂不支持这类细节 */
  /* 可选：给滑块加个边框，和轨道区分更明显 */
  /* border: 2px solid black; */
}

/* 滚动条上下/左右按钮（可选） */
::-webkit-scrollbar-button {
  background-color: black;
}

/* 滚动条交叉角落（可选） */
::-webkit-scrollbar-corner {
  background-color: black;
}

各部分说明 #

• 标准属性部分：scrollbar-width和scrollbar-color是W3C推出的统一标准写法，语法简洁，能快速实现基础的滚动条样式，Firefox和新版Chrome/Edge都支持，但暂时无法实现圆角、hover状态这类精细样式。
• Webkit前缀部分：保留你原来的写法，针对Webkit内核浏览器实现更细致的样式（比如滑块圆角），这部分不会影响其他浏览器。
• 如果需要支持极旧浏览器（比如IE11或更早的Firefox版本），可以考虑使用JavaScript滚动条插件，但现在这类场景已经非常少见了。

内容的提问来源于stack exchange，提问作者MorBek