如何通过CSS ::scrollbar 伪元素自定义浏览器滚动条？-css教程-PHP中文网

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

如何通过css ::scrollbar 伪元素自定义浏览器滚动条？

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>