Chrome≥104、Edge≥104和Safari≥16.4支持标准::scrollbar伪元素，Firefox仍仅部分支持私有::-moz-scrollbar系列且不支持width/height设置。

Chrome、Edge 和新版 Safari 支持 ::scrollbar 伪元素，但 Firefox 完全不支持，且各浏览器对子伪元素（如 ::scrollbar-thumb）的支持程度和行为差异极大——别指望写一套 CSS 通吃所有浏览器。

哪些浏览器真正支持 ::scrollbar？

目前只有 Chromium 内核（Chrome ≥ 104、Edge ≥ 104）和 Safari ≥ 16.4 实现了标准的 ::scrollbar 伪元素；Firefox 仍沿用旧的 ::-moz-scrollbar 系列，且仅部分支持，无法通过标准方式控制 thumb 大小或圆角。

• Chromium：支持 ::scrollbar、::scrollbar-thumb、::scrollbar-track、::scrollbar-corner
• Safari：支持但限制多，例如 background-color 可用，border-radius 在 thumb 上可能被忽略
• Firefox：无视 ::scrollbar，必须用 ::-moz-scrollbar-thumb 等私有伪类，且不支持 width/height 设置（只能靠 min-width 间接影响）

::scrollbar-thumb 的尺寸和圆角为什么经常失效？

滚动条 thumb 的尺寸由浏览器自动计算，width / height 在大多数场景下被忽略（尤其是垂直滚动条的 thumb 宽度），真正起作用的是 min-width（横向）或 min-height（纵向）。

• Chromium 中：min-width: 8px 能让垂直 thumb 更宽，但设 width: 12px 没效果
• Safari 中：border-radius 在 ::scrollbar-thumb 上常被裁剪，建议搭配 background-clip: padding-box 避免溢出
• thumb 的颜色推荐用 background-color，不要依赖 color 或渐变（部分版本渲染异常）

如何做最小兼容性兜底？

不能只靠 ::scrollbar，得叠加私有前缀 + 回退方案。最简可行组合是：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

/* 标准写法（Chromium/Safari） */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  min-height: 40px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
<p>/<em> Firefox 私有写法（仅部分生效） </em>/</p><ul><li>{
scrollbar-width: thin;
scrollbar-color: #888 #f5f5f5;
}</li></ul><p>/<em> 兜底：禁用原生滚动条，用 JS 滚动库（如 simplebar）时才启用 </em>/
body.scrollbar-hidden {
overflow: hidden;
}

scrollbar-width: thin 和 scrollbar-color 是 Firefox 唯一稳定支持的两个属性，它们不依赖伪元素，也不触发重绘问题。

真正麻烦的不是怎么写样式，而是当用户缩放页面、切换系统深色模式、或在触摸设备上拖拽时，::scrollbar-thumb 的交互反馈会突然变弱甚至消失——这些细节没法靠 CSS 声明解决，得靠实际设备测试。