现代浏览器自定义滚动条需分WebKit（Chrome/Edge/Safari）和Firefox两套方案：前者用::-webkit-scrollbar伪元素，仅对overflow溢出的块级容器生效；后者用scrollbar-width和scrollbar-color，且color仅在width为auto或thin时生效。
现代浏览器中，自定义滚动条完全可行，但只靠一套 CSS 规则无法跨浏览器生效；Chrome/Edge/Safari 用 ::-webkit-scrollbar 系列伪元素，Firefox 则必须用 scrollbar-width 和 scrollbar-color 这两个专用属性。
为什么全局设置 ::-webkit-scrollbar 没效果
常见错误是直接在 :root 或 html 上写 ::-webkit-scrollbar，但该伪元素不继承，也不作用于整个页面根滚动条（即 body 的滚动条）——它只对设置了 overflow 且内容溢出的**块级容器**生效。
- 必须先有可滚动的容器：比如
.content { height: 400px; overflow-y: auto; } - 再给这个容器加伪元素：
.content::-webkit-scrollbar { width: 8px; } - 如果容器是
body自身，需显式设body { overflow-y: scroll; }（不能依赖默认行为） - 某些情况下，
html元素会劫持滚动，此时应改用html::-webkit-scrollbar，但更稳妥的做法是避免直接定制根滚动条，转而封装一个带滚动的div
Firefox 下 scrollbar-color 不生效的条件
scrollbar-color 只在 scrollbar-width 不为 none 时起作用，且仅支持 auto 和 thin 两种值；设成 scrollbar-width: auto 后，scrollbar-color: #666 #f5f5f5 才会应用。
- 错误写法：
scrollbar-width: none;→ 滚动条消失，scrollbar-color被忽略 - 错误写法：
scrollbar-width: thick;→ 无效值，回退到默认样式，颜色也不生效 - 正确组合：
scrollbar-width: thin; scrollbar-color: #777 #eee; - 注意：Firefox 不支持圆角、hover 状态、轨道背景图等 WebKit 特性，能控制的只有颜色和粗细
滚动条隐藏但保留滚动功能怎么写
想让滚动条“看不见但摸得着”，不是简单设 display: none，而是把滑块缩到不可见，同时确保容器仍可响应滚轮和拖拽。
立即学习“前端免费学习笔记（深入）”；
- WebKit 方案：
::-webkit-scrollbar { width: 0; }或::-webkit-scrollbar-thumb { background: transparent; } - Firefox 方案：
scrollbar-width: none;（这是唯一可靠方式） - ⚠️ 风险点：若同时设了
overflow: overlay（已废弃），或父容器有overscroll-behavior: contain，可能干扰手势滚动，尤其在 macOS Safari 上 - 移动端需额外测试：iOS Safari 对隐藏滚动条支持不稳定，部分版本下
scrollbar-width: none会被忽略
自定义滚动条影响性能的几个信号
滚动条样式本身开销极小，但不当使用会间接引发重排或触发合成层爆炸。
- 大量使用
::-webkit-scrollbar-thumb:hover+transform动画：每次 hover 都可能触发 layout，建议只用background-color变化 - 在
position: fixed容器里套自定义滚动条：某些 Chrome 版本下会导致滚动抖动 - 对
table直接加伪元素无效，必须包裹在div中再设样式，否则浏览器可能跳过渲染优化路径 - 如果容器内含大量 DOM 节点（如千行列表），滚动条样式不会卡顿，但滚动本身会——这时该考虑虚拟滚动，而不是调滚动条 CSS
真正难的是统一行为：WebKit 支持精细控制，Firefox 只给两个开关，而 Safari 在某些 macOS 版本上会忽略 scrollbar-width: thin。实际项目里，优先保 Firefox 基础样式，再用 @supports selector(::-webkit-scrollbar) 做 WebKit 增强，别试图让两者看起来一模一样。
