scrollbar-gutter: stable 必须作用于 html 元素，因浏览器规范限定其仅对根滚动容器生效；写在 body 或普通元素上无效，且必须搭配 overflow-y: auto 才触发预留逻辑。
scrollbar-gutter: stable 是目前唯一能从布局层稳定盒模型可用宽度的 CSS 方案，它不依赖 JS、不触发重排，但必须写在 html 元素上且搭配 overflow-y: auto 才生效。
为什么 scrollbar-gutter 必须作用于 html 元素
浏览器规范明确限定 scrollbar-gutter 只对根滚动容器（即 html）生效；写在 body、.container 或任何普通 div 上都无效——控制台不会报错，但完全不预留空间。常见误用包括：body { scrollbar-gutter: stable; } 或 .main { scrollbar-gutter: stable; }，这类写法在所有支持该属性的浏览器中均无效果。
必须搭配 overflow-y: auto 才触发预留逻辑
scrollbar-gutter: stable 本身是“惰性”的：它只在滚动行为被激活时才参与布局计算。以下组合效果不同：
-
html { scrollbar-gutter: stable; }→ 无效果，不预留空间 -
html { overflow-y: visible; scrollbar-gutter: stable; }→ 被忽略，因无滚动需求 -
html { overflow-y: hidden; scrollbar-gutter: stable; }→ 同样被忽略 -
html { overflow-y: scroll; scrollbar-gutter: stable; }→ 冗余，overflow-y: scroll已强制占位，scrollbar-gutter不起新作用 -
html { overflow-y: auto; scrollbar-gutter: stable; }→ ✅ 正确：滚动条按需出现，但槽位始终存在
@supports 回退到 overflow-y: scroll 是最稳兜底
Chromium 120+、Firefox 111+、Safari 17.4+ 支持 scrollbar-gutter，但旧版 Edge、部分安卓 WebView、微信内置浏览器仍不支持。此时不能靠 JS 测量或硬编码 padding-right: 17px，因为：
立即学习“前端免费学习笔记（深入）”；
- macOS 滚动条默认隐藏，宽度为 0
- Windows 主题下滚动条宽度可能为 12–20px
-
calc(100vw - 100%)在字体加载、动态插入内容等时机易产生瞬时闪烁
推荐纯 CSS 渐进增强写法：
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}别碰 both-edges，除非你真在做 RTL/LTR 混排
scrollbar-gutter: stable both-edges 是规范要求的完整语法，但实际只需 stable 即可满足绝大多数单向页面需求。加 both-edges 会让内容区左右各留约 15px 空白，在窄屏下明显缩窄，且对中文/英文单向页面毫无必要。Bootstrap 等 UI 库若注入 padding-right（如 body.modal-open），还需额外覆盖：body.modal-open { padding-right: 0 !important; }。
真正起效的关键就三件事：写在 html 上、配 overflow-y: auto、用 @supports 做回退——漏掉任一环，抖动照常发生；而一旦写对，它就在布局计算阶段完成空间预留，比任何运行时测量都干净彻底。
