overflow-y: overlay不是标准属性，chrome/safari已移除、firefox从未支持；唯一跨浏览器替代是scrollbar-gutter: stable，需配合overflow-y: auto使用，通过布局预留槽位确保宽度恒定。
直接说结论：overflow-y: overlay 不存在“平替”一说，它压根不是标准属性，Chrome 和 Safari 已移除，Firefox 从未支持；真正该用的是 scrollbar-gutter: stable，配合 overflow-y: auto 使用。
为什么 overflow-y: overlay 根本不能用
这个值从来就不是 CSS 规范的一部分。Chromium（Chrome/Edge）和 WebKit（Safari）曾短暂实现过它，但仅限 macOS 风格滚动条场景，且2024 年起已陆续移除。你在 Chrome DevTools 里看到该声明被划掉，不是你写错了，是浏览器主动拒收。Firefox 从不解析它——遇到就 fallback 到 overflow-y: auto，结果就是滚动条照常占位、内容被挤窄。
常见错误现象：
- 本地 Chrome 看着正常，上线后 Firefox 或新版 Edge 布局突然收缩
- 加了
@supports (overflow-y: overlay)检测，永远进不去，因为该特性从未被标准化 - 以为加
scrollbar-width: none就能隐藏+覆盖，结果只是隐藏了轨道，空间仍被占用
scrollbar-gutter: stable 是唯一跨浏览器稳解
它不靠“覆盖”，而是从布局层预留滚动条槽位，让容器宽度恒定。只要 overflow-y 是 auto 或 scroll，scrollbar-gutter: stable 就生效。
关键实操点：
- 必须和
overflow-y: auto同时存在，单独写scrollbar-gutter: stable无效 - 推荐写法：
scrollbar-gutter: stable both（两边都预留，防 flex 子项收缩） - 对固定宽高容器最友好；弹性容器需额外加
min-width: 0或width: 0防 collapse - 现代浏览器全支持：
Chrome 94+、Firefox 97+、Safari 16.4+，无前缀
示例：
div {
width: 320px;
height: 200px;
overflow-y: auto;
scrollbar-gutter: stable both;
}
Firefox 下如何做到“视觉上不扰动”
Firefox 不可能让滚动条浮在内容上，但可以做到：空间稳定 + 视觉弱化 + 行为一致。
组合方案：
- 默认状态：
overflow-y: hidden+scrollbar-gutter: stable both - 悬停/聚焦时：
overflow-y: auto（不是 overlay），滚动条自然出现在预留槽内 - 隐藏轨道（仅视觉）：
scrollbar-width: none（Firefox）或::-webkit-scrollbar { width: 0 }（Chromium/Safari） - 弱化滑块：
scrollbar-color: rgba(0,0,0,0.1) transparent（Firefox）或::-webkit-scrollbar-thumb（其他）
注意：scrollbar-width: none 不释放空间，所以 scrollbar-gutter 仍是刚需。
uni-app / 移动端等特殊环境要绕开 overflow-y
在 uni-app 的安卓 WebView 中，overflow-y: auto 本身就不稳定，更别说 overlay 这种非标值。此时应放弃纯 CSS 方案：
- 优先用
<scroll-view></scroll-view>组件（uni-app 内置），它封装了原生滚动能力 - H5 环境下若必须用 CSS，加
-webkit-overflow-scrolling: touch（仅 iOS 旧版有效），但现代 iOS 已默认启用惯性滚动，该属性可删 - 安卓低端机兜底：用
padding-right: calc(100vw - 100%)动态抵消滚动条宽度（兼容 IE/旧 Edge）
最容易被忽略的一点：所有方案都依赖 scrollbar-gutter 和 overflow 共存。把它当成“独立开关”去用，注定失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
