最干净现代的解法是html{scrollbar-gutter:stable;overflow-y:auto}，不支持时回退至html{overflow-y:scroll}；该属性仅对html根元素生效，且必须配合overflow-y:auto或scroll才触发预留空间。
直接结论：用 html { scrollbar-gutter: stable; overflow-y: auto } 是当前最干净、最现代的解法；不支持时 fallback 到 html { overflow-y: scroll } 即可稳住布局。
scrollbar-gutter: stable 必须写在 html 上才生效
很多人写了 scrollbar-gutter: stable 却没效果，根本原因是它只对根元素（html）起作用，设在 body、.container 或任何其他 div 上都无效。浏览器规范明确限定该属性仅适用于根滚动容器。
常见错误现象：
- 在
.main-content { scrollbar-gutter: stable }中设置 → 完全无反应 - 只写
scrollbar-gutter: stable，但没配overflow-y: auto或scroll→ 预留空间逻辑不触发
实操建议：
- 必须写成：
html { scrollbar-gutter: stable; overflow-y: auto; } -
stable已隐含“单侧预留”，无需加both-edges（除非做 RTL 双向布局） - 不要和
overflow: hidden混用——这会禁用滚动，scrollbar-gutter失去意义
为什么不能只靠 overflow-y: scroll？
overflow-y: scroll 确实能强制滚动条常驻、消除抖动，但它让滚动条始终可见，设计上常不可接受。而 scrollbar-gutter: stable 的价值在于：它在不显示滚动条的前提下，提前预留出等宽空白区（通常 15–17px），滚动条出现时直接“落进”这个槽里，内容区域宽度零变化。
参数差异：
-
overflow-y: scroll→ 滚动条永远显示，占位且可见 -
overflow-y: auto+scrollbar-gutter: stable→ 滚动条按需显示，但空间永远预留 -
overflow-y: overlay→ 滚动条叠在内容上，但 Firefox 不支持，已淘汰
性能/兼容性影响：
- Chrome 94+、Firefox 97+、Safari 16.4+ 原生支持，无运行时开销
- 旧版浏览器（如 Safari
兼容性兜底：如何安全 fallback 到 overflow-y: scroll
仅靠 scrollbar-gutter 无法覆盖所有用户，尤其企业内网还可能跑着旧版 Edge 或定制 Chromium。此时需用 CSS 层叠机制做渐进增强：
html {
overflow-y: scroll; /* 兜底：所有浏览器都认 */
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
这样写的好处：
- 不支持
@supports的老浏览器（如 IE）直接走第一行，稳住布局 - 支持
@supports但不支持scrollbar-gutter的浏览器（如 Safari 16.0–16.3）也走第一行 - 新浏览器命中
@supports块，启用更优雅的stable行为
注意：不要用 JavaScript 检测特性再插样式——渲染阶段就可能完成重排，抖动已发生。
容易被忽略的细节：滚动条宽度不是固定值
不同系统、不同缩放比下，滚动条宽度实际是浮动的：Windows 默认约 17px，macOS 隐藏式为 0，但 Classic 模式下可能是 12px，高 DPI 下还会放大。而 scrollbar-gutter: stable 的精妙之处，正在于它不依赖具体像素值——浏览器内部自动读取当前环境下的滚动条真实宽度并预留，开发者完全不用计算或 hack。
所以别试图用 padding-right: 17px 或 margin-left: -17px 模拟——既不准，又破坏语义，还干扰响应式断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
