scrollbar-gutter: stable 是唯一可靠替代 overflow: overlay 的方案，它通过布局预留滚动条槽位确保容器宽度恒定，chrome 94+、firefox 97+、safari 16.4+ 全支持且无需前缀。
overflow: overlay 已被 Chromium 和 Safari 移除，Firefox 从未支持——它不是“用不了”，而是根本不存在于标准中。别再查兼容性表了，直接换方案。
为什么 scrollbar-gutter: stable 是唯一可靠替代
它不是“模拟 overlay”，而是从布局层面预留滚动条槽位，让容器宽度恒定。只要 overflow 是 auto 或 scroll，scrollbar-gutter: stable 就能生效；单独写它，等于没写。
- Chrome 94+、Firefox 97+、Safari 16.4+ 全支持，无需前缀
- 不依赖滚动条是否显示，也不改变滚动行为，只稳住空间
- 比 JS 计算
clientWidth - offsetWidth更轻量、无重排、无监听开销 - 对固定宽高容器最有效；弹性容器（如
flex子项）需额外设min-width防收缩
鼠标悬停显示滚动条时如何避免内容跳动
不能靠 overflow: hidden → overlay 切换，那在 Firefox 里会直接缩容。正确做法是：默认保留滚动条槽位 + 悬停时才启用滚动能力。
- 容器默认设
overflow: hidden+scrollbar-gutter: stable both - 悬停时改
overflow: auto（不是overlay），滚动条自然出现在预留槽内 - 若需隐藏默认滚动条轨道，Chromium/Safari 用
::-webkit-scrollbar { width: 0 }；Firefox 用scrollbar-width: none - 注意：Firefox 的
scrollbar-width: none仅隐藏，不释放空间；必须搭配scrollbar-gutter才稳
Firefox 下滚动条无法真正“覆盖”的现实
没有 CSS 属性能让 Firefox 的滚动条浮在内容上。你只能接受：它始终占位，但可通过组合手段让它“不显眼 + 不扰动”。
- 用
scrollbar-color: rgba(0,0,0,0.1) transparent弱化滑块与轨道对比 - 配合
scrollbar-width: thin缩窄宽度（Firefox 支持，Chromium 不识别） - 全局兜底：给容器加
padding-right: calc(100vw - 100%);，动态抵消滚动条宽度（IE/旧版 Edge 备用） - 切勿在
@supports里检测overflow: overlay——它从来就不是标准特性，检测永远失败
最容易被忽略的点：scrollbar-gutter 必须和 overflow: auto（或 scroll）共存才起作用；把它当成独立“隐藏滚动条”的工具，注定失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
