scrollbar-gutter: stable 是阻止 layout shift 的唯一标准解法，它强制浏览器在布局计算时预留滚动条空间，必须作用于 html 元素并配合 overflow-y: auto 使用，chromium 120+/firefox 111+/safari 17.4+ 支持，旧版需 @supports 回退。
scrollbar-gutter 怎么阻止 layout shift？
它不“阻止”抖动，而是提前把滚动条要占的空间预留出来——就像地铁进站前先画好黄线，人不会因为车来了突然被挤开。scrollbar-gutter: stable 的本质是让浏览器在计算布局时，把滚动条宽度当作容器固有的一部分，而不是等 overflow-y: auto 触发后才临时加进去。
为什么必须写在 html 上？
浏览器规范明确限定 scrollbar-gutter 只对根滚动容器（即 html 元素）生效。写在 body、.main 或任意 div 上都无效，控制台也不会报错，但空间就是不预留。
-
html是唯一能触发“根级滚动槽”机制的元素 -
body默认不是滚动上下文，即使设了overflow-y: auto也绕不过这个限制 - 嵌套容器（如弹窗内部的
.modal-content）需单独处理，但它们不走scrollbar-gutter，得靠overflow: hidden或固定宽高兜底
overflow-y: auto 和 scrollbar-gutter: stable 必须配对使用
单独写 scrollbar-gutter: stable 没效果；只写 overflow-y: auto 会抖。二者组合才是关键逻辑链：
-
overflow-y: auto→ 决定“是否需要滚动” -
scrollbar-gutter: stable→ 决定“不管需不需要，都预留空间” - 缺一不可：没
auto，浏览器不进入按需滚动逻辑，stable失去作用前提；没stable，auto就是传统抖动模式 - 别用
overflow-y: scroll替代——它强制显示滚动条，虽不抖，但视觉冗余，且在 macOS 隐藏滚动条策略下可能失效
@supports 回退为什么不能靠 JS 测量？
用 JS 动态读取 document.documentElement.offsetWidth 差值来判断滚动条宽度，看似聪明，实则脆弱：
- macOS 滚动条默认隐藏，宽度为 0；Windows 主题下可能是 12px、17px 或 20px，无法统一
- 字体加载、图片解码、JS 插入 DOM 等时机都可能导致测量瞬间错位，产生闪动
- 微信内置浏览器、旧版安卓 WebView 不支持
scrollbar-gutter，但可能支持overflow-y: scroll，这时纯 CSS 回退更稳 - 正确姿势：
html { overflow-y: scroll; }+@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }
真正容易被忽略的是：哪怕你写了正确的两行，如果项目里用了 Bootstrap 或某些 UI 库，它们可能在 body.modal-open 时自动加 padding-right: 17px，造成双重占位——这时候得手动覆盖 body.modal-open { padding-right: 0 !important; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
