必须写html { scrollbar-gutter: stable; overflow-y: auto; }，因该属性仅对根滚动容器html生效且需配合overflow-y: auto才触发预留逻辑；不支持时应通过@supports回退至html { overflow-y: scroll; }。
scrollbar-gutter 必须写在 html 上才生效
写在 body、.container 或任何 div 上都无效——浏览器规范明确限定它只作用于根滚动容器，也就是 html 元素。常见错误包括：.main { scrollbar-gutter: stable; } 看似合理，但控制台无报错，实际完全不预留空间；body { scrollbar-gutter: stable; overflow-y: auto; } 也无效，因为 body 不是根滚动上下文。
必须搭配 overflow-y: auto 才触发预留逻辑
scrollbar-gutter: stable 本身不干活，它依赖 overflow 行为来决定是否启用“槽（gutter）”机制：
- 只写
html { scrollbar-gutter: stable; }→ 无效果，浏览器不计算预留空间 -
overflow-y: visible或hidden→scrollbar-gutter不激活 -
overflow-y: scroll→ 已强制占位，scrollbar-gutter变成冗余，旧版 Safari 中可能冲突 - 正确组合：
html { overflow-y: auto; scrollbar-gutter: stable; }→ 滚动条按需出现，但槽空间始终存在
@supports 回退到 overflow-y: scroll 是最稳兜底
Chrome 94+、Firefox 97+、Safari 16.4+ 支持 scrollbar-gutter，但旧版 Edge、部分安卓 WebView、微信内置浏览器仍不支持。靠 JS 测量或硬编码 padding-right: 17px 都不可靠：
- macOS 滚动条默认隐藏时宽度为 0，Windows 主题可能为 12–20px
-
calc(100vw - 100%)动态算宽，但字体加载、JS 插入内容等时机易产生瞬时闪烁 - 推荐纯 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 { padding-right: 0 !important; }
html 或 body 直接设，除非你确认整个页面需要双边预留（极少见）真正起效的关键就两行：根元素 + 正确组合 + 渐进回退。漏掉任一环，抖动照常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
