最干净现代的解法是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、.container 或任何其他 div 上都无效——浏览器规范明确限定该属性仅适用于根元素。
常见错误现象：
-
.main-content { scrollbar-gutter: stable; }→ 完全无反应 -
html { scrollbar-gutter: stable; }但没配overflow-y: auto或scroll→ 预留空间逻辑不触发
实操建议：
- 必须写成：
html { scrollbar-gutter: stable; overflow-y: auto; } -
stable已隐含“单侧预留”，无需加both-edges（除非做 RTL 双向布局） - 不要和
overflow: hidden混用——这会禁用滚动，scrollbar-gutter失去意义
@supports 检测 + fallback 到 overflow-y: scroll
不是所有浏览器都支持 scrollbar-gutter：Chrome/Edge 94+、Firefox 97+、Safari 16.4+ 原生支持；旧版 Edge、定制 Chromium 内网环境、部分安卓 WebView 仍需兜底。
不能只靠 @supports 写一层，必须利用 CSS 层叠机制做渐进增强：
html {
overflow-y: scroll; /* 所有浏览器都认，强制常驻滚动条 */
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
这样写的好处：
- 旧浏览器直接走第一行，稳住布局（虽然滚动条常显）
- 新浏览器覆盖为按需显示 + 预留空间，视觉与行为都自然
- 无需 JS 检测，零运行时开销
为什么不用 overflow-y: scroll 单独解决？
overflow-y: scroll 确实能消除抖动，但它带来三个不可忽视的副作用：
- 滚动条永远可见，破坏 macOS/Safari 的悬停显示习惯，UI 显得冗余
- 在内容未溢出的页面，会出现不可拖动的灰色滑块，尤其影响表单页、空状态页的观感
- 某些 UI 库（如 Ant Design、Mantine）内部依赖
overflow: auto判断是否启用滚动逻辑，硬设scroll可能干扰其行为 - 微信内置 WebView 对
overflow-y: scroll渲染不稳定，偶发卡顿或失效
而 scrollbar-gutter: stable 的价值在于：它在不显示滚动条的前提下，提前预留出等宽空白区（通常 15–17px），滚动条出现时直接“落进”这个槽里，内容区域宽度零变化。
兼容性差时 fallback 到 calc(100vw - 100%) 的坑
当 scrollbar-gutter 不可用，又不愿用 overflow-y: scroll 时，calc(100vw - 100%) 是目前最实用的纯 CSS fallback 方案，但它有陷阱：
- Safari 16.4 之前不支持该表达式动态计算，页面加载时可能取值为 0，需 JS 首次检测后写死：
document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px` - 不能只加
margin-right: calc(...)，否则可能遮挡固定定位元素（如右上角头像），必须配合padding-right补位 - 若页面存在横向溢出（如未限制图片宽度、绝对定位越界），
100%计算会失准，此时应先修复溢出源，再用此方案
真正难的从来不是选哪个方案，而是判断当前项目里谁在偷偷改 body 宽度——比如第三方 SDK 注入的广告栏、Vue 组件挂载后重排、甚至一个没设 max-width: 100% 的 <img>，都可能让 calc(100vw - 100%) 返回 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
