scrollbar-gutter: stable 必须与 overflow-y: auto 同时作用于 html 元素才生效，且需外层 overflow-y: scroll 兜底、内层 @supports 覆盖，否则滚动条出现导致布局抖动。
因为 overflow-y: auto 本身就会导致抖动——它只是“按需显示滚动条”，不是“预留空间”。 页面高度跨过临界点时，滚动条突然出现，占用约 17px 内容区宽度，所有 width: 100% 元素瞬间左移，这就是抖动的物理原因。
scrollbar-gutter: stable 必须和 overflow-y 配合才生效
很多人写了 html { scrollbar-gutter: stable } 却没效果，根本原因是：该属性只在 overflow-y: auto 或 overflow-y: scroll 下触发预留逻辑。单独写它等于没写。
-
html { scrollbar-gutter: stable; overflow-y: auto; }→ 正确：滚动条出现时，浏览器自动在右侧预留空白（不占内容流），布局不跳 -
html { scrollbar-gutter: stable; }→ 无效：没有 overflow-y 声明，浏览器不启动预留机制 -
body { scrollbar-gutter: stable; }→ 无效：该属性只对根元素html生效，写在body或任何 div 上都忽略 -
html { scrollbar-gutter: stable; overflow: hidden; }→ 无效：滚动被禁，scrollbar-gutter失去意义
@supports 降级必须写在外层，不能只靠条件块
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter，但企业内网、旧版 Edge、定制 Chromium 等环境可能直接不识别 @supports 语法，此时整个块会被跳过。
- 错误写法：只写
@supports (scrollbar-gutter: stable) { ... }→ 老浏览器无任何滚动条控制，抖动照常 - 正确顺序：先写兜底
html { overflow-y: scroll; }（强制常驻滚动条，保底不抖） - 再用
@supports覆盖：@supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } }
calc(100vw - 100%) 是局部补救，别当全局方案用
calc(100vw - 100%) 能动态算出滚动条宽度（有则 ≈17px，无则为 0），适合给特定容器加 padding-right 补位，但它不是根治方案。
立即学习“前端免费学习笔记（深入）”；
- 写在
body上：padding-right: calc(100vw - 100%);→ 可缓解主体偏移，但无法解决表单、弹窗、固定定位元素的抖动 - 滥用在多个嵌套容器上 → 可能造成 padding 叠加、响应式错乱、RTL 布局异常
- 它依赖视口宽度计算，在 zoom 缩放、iframe 嵌入、移动端横竖屏切换时行为不稳定
真正关键的点就两个：一是 scrollbar-gutter: stable 必须和 overflow-y: auto 成对出现在 html 上；二是降级必须是“外层兜底 + 内层覆盖”，而不是把所有规则都塞进 @supports 里。漏掉任一环，抖动就会回来。
