如何使用CSS scrollbar-gutter属性防止滚动条出现导致的晃动

必须写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 空白，在窄屏下明显缩窄
不推荐给 html 或 body 直接设，除非你确认整个页面需要双边预留（极少见）
• Bootstrap 等 UI 库可能注入 padding-right 导致双重占位，需额外覆盖：body.modal-open { padding-right: 0 !important; }

真正起效的关键就两行：根元素 + 正确组合 + 渐进回退。漏掉任一环，抖动照常发生。