必须写 html { scrollbar-gutter: stable; overflow-y: auto; }，因该属性仅对根滚动容器（html）生效，且需配合 overflow-y: auto 才触发预留逻辑；不支持时应通过 @supports 回退至 html { overflow-y: scroll; }。
直接结论：必须写 html { scrollbar-gutter: stable; overflow-y: auto; }，其他位置或组合基本无效。
scrollbar-gutter: stable 为什么只对 html 元素生效
这不是浏览器“不支持”，而是 CSS 规范明确限定：scrollbar-gutter 仅作用于根滚动容器（即 html），设在 body、.main 或任何 div 上都会被静默忽略。常见错误包括：
-
.container { scrollbar-gutter: stable; }→ 控制台无报错，但完全不预留空间 -
body { scrollbar-gutter: stable; overflow-y: auto; }→ 依然无效，因为body不是根滚动上下文
根源在于：只有 html 才控制整个视口的滚动行为和盒模型计算边界。所有内容宽度抖动，本质是根容器可用宽度突变，所以干预点只能在这里。
overflow-y: auto 是必要搭档，不是可选
scrollbar-gutter: stable 本身不触发预留逻辑，它依赖 overflow 行为来决定是否启用“槽（gutter）”机制：
立即学习“前端免费学习笔记（深入）”；
- 只写
html { scrollbar-gutter: stable; }→ 无效果，浏览器不计算预留空间 -
overflow-y: visible或hidden→scrollbar-gutter不激活 -
overflow-y: scroll→ 已强制占位，scrollbar-gutter变成冗余，且在旧版 Safari 中可能冲突 - 正确组合：
overflow-y: auto+scrollbar-gutter: stable→ 滚动条按需出现，但槽空间始终存在
这个组合让内容区宽度恒定，滚动条只是“落进”已预留的槽里，不挤 content，也不改 layout width。
@supports 回退到 overflow-y: scroll 才真正兜底
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter，但旧版 Edge、部分安卓 WebView、微信内置浏览器仍不支持。靠 JS 检测或硬编码 padding-right 都不可靠：
-
body { padding-right: 17px; }→ macOS 滚动条默认隐藏时宽度为 0，Windows 主题可能为 12–20px，必翻车 -
calc(100vw - 100%)虽能动态算出真实滚动条宽，但需确保html没被其他样式劫持，且在字体加载、JS 插入内容等时机易产生瞬时闪烁 - 最稳方案是 CSS 层叠回退：
html { overflow-y: scroll; }@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }
这样旧浏览器走第一行（常驻滚动条），新浏览器覆盖为按需 + 预留，零 JS、零运行时开销。
别碰 both-edges，除非你在做 RTL/LTR 混排
scrollbar-gutter: both-edges 会在左右两侧各留一个滚动条宽度，纯 LTR 页面用它会白丢 ~30px 内容宽度：
- 窄屏下明显缩窄，尤其影响全宽 banner、表格列宽计算 该值主要面向双向文本布局，普通官网、后台系统完全不需要
- 写成
html { scrollbar-gutter: stable both-edges; }是典型误用，stable本身已隐含单侧（右侧）预留
真正容易被忽略的是 Bootstrap 等 UI 库的干扰：它们的 Modal 打开时会往 body 注入 padding-right，与 scrollbar-gutter 叠加导致双重偏移。此时得额外加 body.modal-open { padding-right: 0 !important; } 覆盖。
