现代浏览器中仅WebKit/Blink内核（Chrome/Edge/Safari）支持::-webkit-scrollbar系列伪元素定制滚动条，需同时定义::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三者，缺一不可；Firefox不支持该方案。
怎么用 CSS 控制滚动条样式（Chrome / Edge / Safari）
现代浏览器中，只有基于 webkit/blink 的引擎（chrome、edge、safari）支持原生滚动条样式定制，firefox 不支持 ::-webkit-scrollbar 系列伪元素，别白费劲写一堆 css 在 firefox 里看不到效果。
关键点在于：必须同时定义 ::-webkit-scrollbar（滚动条整体）、::-webkit-scrollbar-track（轨道）、::-webkit-scrollbar-thumb（滑块），缺一个就可能回退到默认样式或完全不生效。
-
::-webkit-scrollbar宽度/高度决定滚动条粗细，设为8px比较稳妥，太小（如4px）在高分屏上易误触失效 -
::-webkit-scrollbar-thumb必须设background-color，且推荐加border-radius和transition，否则拖动时显得生硬 - 不要给
::-webkit-scrollbar-track设透明背景（比如rgba(0,0,0,0)），某些版本 Chrome 会直接隐藏整个滚动条
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: #f5f5f5; }
body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
怎么彻底隐藏滚动条但保留滚动功能
隐藏 ≠ 禁用。常见错误是直接写 overflow: hidden，结果内容真不能滚了——这不是“隐藏滚动条”，这是“砍掉滚动能力”。正确做法是让滚动条不可见但依然响应滚动事件。
核心思路：用外层容器裁剪 + 内层容器溢出滚动 + 滚动条透明化，或者用负 margin 把滚动条推到视口外。
- 最稳方案：外层
div设overflow: hidden，内层设overflow-y: scroll并配合::-webkit-scrollbar { width: 0 } - 慎用
scrollbar-width: none（Firefox）和-ms-overflow-style: none（IE/旧 Edge）：前者只在 Firefox 有效，后者已废弃，且单独用它们无法保证 Chrome 同步隐藏 - 绝对定位 +
right: -16px推走滚动条？风险大——不同系统滚动条宽度不同（macOS 默认无滚动条，Windows 常为 17px），硬写死值容易在某些设备上漏出或切掉内容
为什么 macOS 上滚动条默认不显示，但你的样式没生效
macOS 的“自动隐藏”行为是系统级的，即使你写了 ::-webkit-scrollbar 样式，只要系统设置是“仅按需显示”，滚动条在静止时就是不可见的——这跟你的 CSS 无关，不是 bug。
立即学习“前端免费学习笔记（深入）”；
真正要检查的是：是否在用户开始滚动后，滑块依然没颜色、没圆角、卡在角落？那大概率是伪元素选择器权重不够，或被其他全局样式（比如重置库里的 *::-webkit-scrollbar）覆盖了。
- 加
!important是临时解法，但更该检查样式加载顺序和作用域——比如 Shadow DOM 里要额外在内部定义 - macOS Safari 对
::-webkit-scrollbar-thumb:active支持不稳定，别依赖它做按下反馈 - 测试时别只看本地开发服务器，用真实 iOS Safari 或 macOS Safari 打开，有些样式在桌面 Chrome 模拟移动设备时表现异常
滚动条样式在移动端（iOS / Android）的表现差异
iOS Safari 完全忽略 ::-webkit-scrollbar，无论你怎么写，滚动条都按系统原生样式来，且默认不常驻。Android Chrome 虽支持，但只在“强制显示滚动条”设置开启时才渲染，普通用户几乎看不到你的自定义样式。
这意味着：面向移动端的项目，别把交互逻辑或布局依赖滚动条可见性。比如“右侧留 16px 给滚动条”的设计，在 iOS 上就是错的。
- 检测是否需要降级处理？可以用
CSS.supports('selector(::-webkit-scrollbar)')，但注意它在 iOS Safari 里也返回true（语法支持 ≠ 渲染支持） - 想统一视觉？不如用 JS 滚动库（如
simplebar），但它会替换原生滚动行为，影响惯性滚动、缩放、键盘导航等原生体验 - 性能提示：过度复杂动画（比如滑块缩放 + 渐变 + 阴影）在低端 Android 设备上会导致滚动卡顿，建议保持
transform和opacity级动画
