能用纯css实现漂亮滚动条的仅限chrome/edge/safari；firefox仅支持scrollbar-width和scrollbar-color两属性；ios safari完全无视所有滚动条css。
直接给结论：能用纯 CSS 做出“漂亮滚动条”的，只有 Chrome/Edge/Safari（WebKit/Blink 内核）；Firefox 只能调两个属性；iOS Safari 完全无视所有滚动条 CSS——别试了。
为什么写了 ::-webkit-scrollbar 却没反应
最常见原因是容器根本没产生真实滚动行为。伪元素只对“正在滚动”的元素生效，不是写了就起作用。
-
overflow-y: auto或overflow-y: scroll必须显式写在滚动容器上（比如div.scrollable），不能靠父级继承 - 内容高度必须真正超出容器高度——检查
div是否被flex: 1撑开但父级没设height或max-height - 某些 UI 库（如 Ant Design）或重置 CSS（如 Normalize.css）会悄悄加
::-webkit-scrollbar { display: none }，得用!important覆盖（不推荐但有时必须） - 选择器漏了前缀，比如只写
::-webkit-scrollbar，结果全局污染或完全不匹配目标容器
Chrome/Edge/Safari 中控制滚动条粗细和颜色的关键点
四个伪元素要协同工作，缺一不可，且各自职责明确：
-
::-webkit-scrollbar只管尺寸：width: 8px（垂直）或height: 8px（水平），不设颜色 -
::-webkit-scrollbar-track必须设background，否则透明（尤其深色背景上直接消失）；别加border或padding，容易错位 -
::-webkit-scrollbar-thumb至少要有background-color，否则滑块是透明的；border-radius不能超过height / 2（比如height: 6px就别设border-radius: 4px） - 想让滑块常驻不隐藏？光
opacity: 1不够，WebKit 对小尺寸 thumb 有最小渲染高度限制，建议min-height: 40px（仅对局部容器有效）
Firefox 怎么办：只能用 scrollbar-width 和 scrollbar-color
Firefox 不认任何 ::-webkit- 伪元素（包括 ::-webkit-scrollbar-thumb），::-moz-scrollbar 是废弃写法，写了也白写。
- 这两个属性必须写在
html或body上才影响整页滚动条；写在局部容器里无效 -
scrollbar-width: thin是唯一能让滚动条“倾向常驻”的开关，auto会退回到系统默认行为（macOS 下几乎不可见） -
scrollbar-color: #6c5ce7 #f0f0f0第一个值是滑块色，第二个是轨道色；不支持圆角、阴影、渐变，也不能单独定义:hover状态 - 别指望它和 WebKit 效果一致——火狐下就是两块纯色条，接受这个事实比硬调更省时间
iOS Safari 完全忽略所有滚动条 CSS
这不是兼容性问题，是苹果明确不支持。无论你写多少 ::-webkit-scrollbar 或 scrollbar-color，iOS Safari（含 iPadOS）统统当没看见。
- 测试时别用 macOS Safari 代替 iOS 测试，两者渲染差异极大
- 如果项目强依赖水平滚动交互（比如宽表格、时间轴），iOS 上建议用
overflow-x: scroll+-webkit-overflow-scrolling: touch（虽已废弃但仍有惯性效果） - 真要统一外观？JS 库如
simplebar是唯一解，但它会接管原生滚动逻辑，可能影响性能和可访问性
最易被忽略的一点：深色模式下，@media (prefers-color-scheme: dark) 不能直接套在伪元素外面——因为伪元素不响应媒体查询。必须为每套规则单独写深色版，包括 scrollbar-color 和所有 ::-webkit-scrollbar-* 的 background/thumbnail 颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
