原生滚动条无法全局CSS重绘，需按浏览器内核分写：Chrome/Edge用成套::-webkit-scrollbar伪元素；Firefox仅支持scrollbar-width和scrollbar-color两个属性；Safari基本不可控，建议降级或JS接管。
原生滚动条不能直接用 CSS 全局重绘，必须通过伪元素 + 特定浏览器前缀组合控制；Chrome/Edge（Blink）和 Firefox（Gecko）的实现机制完全不同，Safari（WebKit）支持最弱，别指望一套代码全兼容。
Chrome/Edge 里用 ::-webkit-scrollbar 系列伪元素
这是目前最常用、效果最可控的方式，但只对 Blink 内核生效。关键点不是“加样式”，而是“必须成套出现”——漏掉 ::-webkit-scrollbar-track 或 ::-webkit-scrollbar-thumb 中任意一个，自定义就可能失效或回退到默认样式。
-
::-webkit-scrollbar控制整体宽高（比如设width: 8px影响垂直滚动条，height: 8px影响水平滚动条） -
::-webkit-scrollbar-track是轨道背景，建议设background: #f1f1f1避免和页面底色打架 -
::-webkit-scrollbar-thumb是滑块，必须设background，否则透明不可见；可用border-radius做圆角，但别设太大（超过一半宽高会出视觉异常） - 滑块 hover 和 active 状态要用
::-webkit-scrollbar-thumb:hover和::-webkit-scrollbar-thumb:active单独写，不能靠普通伪类继承
Firefox 用 scrollbar-width 和 scrollbar-color
Firefox 完全不认 ::-webkit- 系列，它只支持两个 CSS 属性，且仅作用于根滚动容器（html 或有 overflow 的块级元素）。这两个属性是“开关型”的，没法改圆角、加阴影、做渐变。
-
scrollbar-width: thin | auto | none—— 只有这三个值，thin是最接近自定义的选项，但宽度不可调 -
scrollbar-color: <thumb-color> <track-color>—— 顺序不能反，第二个是轨道色，设成transparent会导致轨道消失但滑块仍可拖（不推荐） - 这两个属性对嵌套的
div滚动容器无效，除非该div显式设置了overflow: auto且触发了滚动
Safari（macOS/iOS）基本没得选，别硬刚
Safari 16.4+ 才开始部分支持 scrollbar-width 和 scrollbar-color，但依然不支持 ::-webkit-scrollbar（尽管它也是 WebKit 内核）。更麻烦的是：macOS 系统偏好里如果开了“自动隐藏滚动条”，CSS 设置会被无视——这是系统级策略，网页无权覆盖。
立即学习“前端免费学习笔记（深入）”；
- 真要统一外观，只能放弃原生滚动条，用 JS 库（如
simplebar或overlay-scrollbars）接管滚动逻辑 - 若只是微调，建议 Safari 下保持默认，或用
@supports (-webkit-appearance: none)做特性检测后降级处理 - iOS 上触摸滚动惯性极强，自定义滚动条容易误判拖拽意图，实测中滑块响应延迟比桌面端高 200ms 左右
真正难的不是写几行 CSS，而是判断哪些滚动容器值得定制、哪些该交给系统——比如表格内部的横向滚动条，用户更关注内容对齐而非样式；而侧边导航栏的纵向滚动，才是自定义收益最高的地方。别为了“全站统一”强行给每个 overflow: auto 加伪元素，DOM 重绘开销和维护成本会上升得很快。
