最干净现代的解法是html{scrollbar-gutter:stable;overflow-y:auto}，不支持时回退至html{overflow-y:scroll}；该属性仅对html根元素生效，且必须配合overflow-y:auto或scroll才触发预留空间。
scrollbar-gutter: stable 必须写在 html 元素上才生效
很多人写了 scrollbar-gutter: stable 却没效果，根本原因就在这儿：该属性**只对根滚动容器（即 html 元素）有效**。设在 body、.main 或任意 div 上，浏览器直接忽略。
常见错误现象：
-
body { scrollbar-gutter: stable }→ 完全无反应 -
.container { scrollbar-gutter: stable; overflow-y: auto }→ 预留逻辑不触发，内容仍会左移
实操建议：
- 必须用
html { scrollbar-gutter: stable; overflow-y: auto; } - 不要加
both-edges，除非你做 RTL 双向布局；stable默认就是单侧预留（右侧），够用 - 别和
overflow: hidden混用——这会让滚动失效，scrollbar-gutter失去意义
为什么不能只靠 overflow-y: scroll 降级
html { overflow-y: scroll } 确实能稳住宽度，但它让滚动条永远可见，设计上常不可接受。而 scrollbar-gutter: stable 的价值在于：滚动条按需显示，但空间永远预留（通常 15–17px），内容区域宽度零变化。
参数差异：
-
overflow-y: scroll→ 滚动条始终显示、占位且可见 -
overflow-y: auto+scrollbar-gutter: stable→ 滚动条按需显示，空间提前预留 -
overflow: overlay→ 已淘汰，Firefox/Safari 不支持，Chrome 也逐步弱化
性能 / 兼容性影响：
- 所有现代浏览器（Chrome 94+、Firefox 104+、Safari 17.5+）已支持
scrollbar-gutter - Safari 16.3– 或旧版 Chrome 93– 会忽略该声明，此时必须 fallback
@supports 写法要配对 fallback 才可靠
光写 @supports (scrollbar-gutter: stable) 不够，得把降级逻辑完整包进去，否则老浏览器会完全不处理。
正确写法：
code
@supports (scrollbar-gutter: stable) {
html {
scrollbar-gutter: stable;
overflow-y: auto;
}
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
/* 补充 body padding 防 Safari 挤压 */
body {
padding-right: calc(100vw - 100%);
}
}
关键点：
-
calc(100vw - 100%)是当前最鲁棒的动态补位方式，它能精确反映当前滚动条真实占用宽度 - 别用
padding-right: 17px或calc(100% - 17px)—— 滚动条宽度随系统浮动（Windows 常为 17px，macOS 隐藏时为 0，悬停后突变为 ~15px） - 这个
padding-right只在降级路径里生效，不影响现代浏览器
scrollbar-gutter 影响的是布局稳定性，不是滚动条外观
真正容易被忽略的一点是：这个问题的本质不是“怎么美化滚动条”，而是“如何让布局不因滚动条出现/消失而重排”。很多团队花时间写 ::-webkit-scrollbar 隐藏样式，却没意识到只要空间没预留，键盘 Tab 焦点或 JS 动态加载内容仍可能触发横向偏移。
所以优先级很明确：
- 第一选择：
html { scrollbar-gutter: stable; overflow-y: auto; } - 第二选择：fallback 到
html { overflow-y: scroll; }+body { padding-right: calc(100vw - 100%); } - 其余方案（手算宽度、overlay、伪元素隐藏）都是临时补丁，有兼容性或可访问性风险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
