现代浏览器中仅 webkit 内核支持 css 自定义滚动条，需用 ::-webkit-scrollbar 系列伪元素；firefox 完全不支持，macos 还受限于系统自动隐藏策略。
现代浏览器中，纯 CSS 就能定制滚动条样式，但必须用 ::-webkit-scrollbar 系列伪元素，且仅在 Chromium 内核（Chrome、Edge、新版 Safari）生效；Firefox 不支持，别浪费时间写兼容。
只对 WebKit 内核生效的伪元素组合
滚动条不是普通 DOM 元素，无法用通用选择器控制。必须用以下固定伪元素，缺一不可：
-
::-webkit-scrollbar：整个滚动条容器（设宽高） -
::-webkit-scrollbar-track：轨道背景（可设圆角、背景色） -
::-webkit-scrollbar-thumb：滑块本体（必须设background-color，否则不可见） -
::-webkit-scrollbar-thumb:hover：悬停态（建议加过渡动画）
注意：::-webkit-scrollbar-button 和 ::-webkit-scrollbar-corner 极少需要，多数扁平设计直接忽略。
推荐的极简扁平样式写法
避免过度拟物（如渐变、阴影），用单色+圆角+平滑过渡更符合现代 UI。关键参数建议：
- 轨道宽度统一设为
8px（太细难拖，太粗破坏布局） - 滑块圆角设为
4px或6px，和 UI 组件保持一致 - 悬停时用
background-color加深 20%～30%，别用 opacity（会透出底色） - 加
transition: background-color 0.2s，否则交互生硬
/* 示例：浅灰底 + 深灰滑块 */<br>.scroll-container {<br> overflow-y: auto;<br>}<br><br>.scroll-container::-webkit-scrollbar {<br> width: 8px;<br>}<br>.scroll-container::-webkit-scrollbar-track {<br> background: #f5f5f5;<br> border-radius: 4px;<br>}<br>.scroll-container::-webkit-scrollbar-thumb {<br> background: #c1c1c1;<br> border-radius: 4px;<br> transition: background-color 0.2s;<br>}<br>.scroll-container::-webkit-scrollbar-thumb:hover {<br> background: #9a9a9a;<br>}
Firefox 下完全无解，别试图 hack
Firefox 自 64 版起移除了 scrollbar-width 以外的所有自定义能力，且 scrollbar-width: thin 仅控制宽度，不支持颜色或圆角。常见误区：
- 写
@supports (-moz-appearance:none)检测并套用 WebKit 样式 —— 无效，Firefox 忽略所有::-webkit-规则 - 用 JS 模拟滚动条（如 perfect-scrollbar）—— 增加包体积、破坏原生滚动行为（如惯性、滚动链）、影响可访问性
- 指望未来标准统一 —— CSS Scrollbars Module Level 1 仍处于 WD 阶段，无主流引擎实现
结论：面向 Firefox 用户，就接受它的默认滚动条；面向内部系统或 Chrome/Edge 主力场景，放心用 WebKit 方案。
真正麻烦的是 macOS 上的“自动隐藏”策略 —— 即使写了样式，滚动条也可能只在滚动时淡入，且宽度由系统控制（width 被忽略）。这时候，::-webkit-scrollbar 只能改颜色和圆角，不能强制常驻显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
