最简单有效的解法是html { overflow-y: scroll }，因html为根元素，其overflow控制视口级滚动行为，body仅为普通块级元素，无法影响视口宽度分配。
直接加 html { overflow-y: scroll } 就能稳住宽度，这是最简单有效的解法，但必须加在 html 上，加在 body 上常因重置样式或父容器限制而失效。
为什么 overflow-y: scroll 必须写在 html 元素上
滚动条的占位行为由根容器决定，html 是文档的根元素，它的 overflow 控制着视口级的滚动行为。浏览器只会在 html 上响应 overflow-y 的占位逻辑；body 只是普通块级元素，它的 overflow 不影响视口宽度分配。
常见错误现象：
- 写了
body { overflow-y: scroll }，但页面仍跳动——因为html默认是overflow-y: auto，它仍会按需显示滚动条，偷走宽度 - 某些 CSS 重置库（如 normalize.css）会重设
html的overflow，导致你写的body规则被覆盖
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终把规则写成
html { overflow-y: scroll }，不要写body - 如果项目用了第三方 UI 库，检查其是否重写了
html的overflow，必要时加!important（仅限兜底） - 避免同时写
html { overflow: scroll }——这会强制出现水平滚动条，引发新问题
overflow-y: scroll 和 scrollbar-gutter: stable 怎么选
两者目标一致：预留滚动条宽度。但机制不同，适用场景有差异。
使用场景：
- 需要兼容 Safari 16.3 及更早版本、Firefox 96 及更早版本时，只用
html { overflow-y: scroll }——它无条件生效 - 面向现代浏览器（Chrome 94+ / Firefox 97+ / Safari 16.4+），且设计不允许可见滚动条时，优先用
html { scrollbar-gutter: stable; overflow-y: auto }
参数差异：
-
overflow-y: scroll强制滚动条始终可见，哪怕内容只有一行 -
scrollbar-gutter: stable仅预留空间，滚动条本身仍按需出现（overflow-y: auto） - 两者可共存：
html { scrollbar-gutter: stable; overflow-y: scroll }是冗余写法，没必要
性能/兼容性：
-
overflow-y: scroll零开销，全浏览器支持 -
scrollbar-gutter是轻量 CSS 属性，不支持时自动降级为原生行为（即可能跳动），所以必须搭配overflow-y: scroll做 fallback
加了 overflow-y: scroll 还跳动？排查这三点
不是所有“跳动”都源于滚动条占位，以下情况即使加了该规则也会抖：
- 页面里存在
transform: translate(-50%, -50%)居中的模态框，且内容溢出——此时overflow在子容器上失效，需改用top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx或 Flex 居中 - 用了
margin: 0 auto居中，但父容器宽度受max-width+100%混合计算影响，滚动条出现后触发了重新计算——应统一用width: min(1200px, 100vw)或width: clamp()替代 - JS 动态插入内容后未触发重排同步，例如用
innerHTML批量写入后立即读取offsetWidth，造成布局抖动——应改用requestAnimationFrame延迟读取
最容易被忽略的一点：很多团队只在 PC 端测试，但移动端 iOS Safari 的滚动条行为和桌面完全不同——它默认隐藏滚动条且不占位，overflow-y: scroll 在 iOS 上仍会显示一个极细的占位条，但视觉上几乎不可见；真正要保一致性，得结合 @supports (scrollbar-gutter: stable) 做渐进增强。
