::-webkit-scrollbar仅webkit内核生效，chrome/edge/safari支持，firefox/ie不支持；需配合overflow属性使用，且必须成套定义子伪元素；firefox需用scrollbar-width和scrollbar-color；移动端兼容性差，性能敏感场景需谨慎。
滚动条样式只在WebKit内核生效
用 ::-webkit-scrollbar 写的滚动条样式，Chrome、Edge、Safari能看见，Firefox和IE完全不认——它根本不是标准CSS，只是WebKit私有扩展。别指望靠它一招覆盖所有浏览器。
常见错误现象：::-webkit-scrollbar 写了但没效果，八成是忘了加 overflow: auto 或 scrollbar-width: none（Firefox里这个才管用）；或者父容器高度固定但内容没溢出，滚动条压根不出现。
- 必须作用于有滚动行为的元素，比如设置了
overflow: scroll或overflow: auto的容器 - 不能直接写在
body上就全局生效，得逐个容器写，或用*::-webkit-scrollbar（但性能差、兼容性更脆） - Firefox需额外用
scrollbar-width: thin | none和scrollbar-color: thumb-track控制，两者语法互不兼容
::-webkit-scrollbar 必须成套使用才有效
单独写 ::-webkit-scrollbar 只定义宽度，滚动条外观不会变；真正起作用的是它的子伪元素：::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块）、::-webkit-scrollbar-corner（右下角交汇处）。漏掉任意一个，样式就断层。
典型使用场景：后台管理页侧边栏菜单滚动、长表格容器、弹窗内嵌滚动内容。这些地方需要统一视觉，但又不能破坏原生滚动体验。
立即学习“前端免费学习笔记（深入）”；
-
::-webkit-scrollbar本身只支持width（垂直滚动条）或height（水平滚动条），单位只能是px或rem，不支持百分比 -
::-webkit-scrollbar-thumb推荐用background-color+border-radius，避免用渐变（某些旧版Safari渲染异常） - 如果容器用了
transform或will-change，部分Chrome版本会丢弃滚动条样式，临时解法是加backface-visibility: hidden
移动端 Safari 的兼容性陷阱
iOS 16.4 之前，::-webkit-scrollbar 在 Safari 移动端完全无效；16.4+ 虽然支持，但仅限于 overflow: scroll 的元素，且不响应 touch-action: none 等手势干预。用户划不动、滑块拖拽卡顿，往往不是代码问题，而是系统限制。
错误现象举例：在 iPhone 上调试好好的桌面样式，真机一跑滚动条还是默认灰色细条——大概率是 Safari 版本不够，或容器缺少 -webkit-overflow-scrolling: touch（iOS 15.4 已废弃，但某些混合场景仍需保留）。
- 不要对 iOS 滚动条样式做强依赖，优先保证可滚动、可拖拽、无卡顿
- 若必须定制，用 JS 监听
scroll+ 自绘滚动条控件（如perfect-scrollbar），但要注意内存泄漏风险 - 测试时务必真机验证，模拟器的滚动行为和渲染路径跟真实设备差异很大
性能敏感场景慎用 ::-webkit-scrollbar
滚动条伪元素虽小，但在大量列表项或虚拟滚动容器里频繁重绘，会触发 Layout + Paint，尤其当 thumb 用了 box-shadow 或 filter 时，帧率明显掉。这不是 bug，是 WebKit 渲染管线的老问题。
参数差异上，width: 8px 比 width: 12px 更轻量；background-color: #ccc 比 linear-gradient 少一次纹理合成。
- 复杂动画尽量避开
::-webkit-scrollbar-thumb:hover，悬停态改颜色比改尺寸更安全 - SSR 或服务端渲染页面里，别在初始 HTML 中硬编码滚动条样式，等 JS 加载后再注入 style 标签，避免阻塞首屏
- CI/CD 构建时可加 PostCSS 插件自动剥离
::-webkit-scrollbar规则，交给运行时按 UA 动态注入
滚动条样式这事，从来不是“写完就完”。它卡在标准边缘、横跨多端、牵扯渲染性能，最麻烦的不是怎么写，而是怎么判断“该不该写”——有时候留白，反而是最稳的方案。
