CSS scrollbar-gutter防止滚动条引起页面晃动

你是否遇到过页面内容在滚动条出现时突然抖动的问题？这种体验相当糟糕，尤其当内容宽度变化导致布局晃动时，用户会明显感到不适。究其原因，是滚动条出现时占用了空间，而之前的布局没有预留。这里有个常见的解决方案：使用CSS的scrollbar-gutter属性。不过，很多人用错了地方，导致效果全无。下面我们来拆解一下正确的用法。

scrollbar-gutter 必须写在 html 上才生效

这是最容易踩坑的地方。写在 body、.container 或任何 div 上都无效——浏览器规范明确限定它只作用于根滚动容器，也就是 html 元素。常见错误包括：.main { scrollbar-gutter: stable; } 看似合理，但控制台无报错，实际完全不预留空间；body { scrollbar-gutter: stable; overflow-y: auto; } 也无效，因为 body 不是根滚动上下文。所以，第一件事就是确认你写在了 html 上。

必须搭配 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; } → 滚动条按需出现，但槽空间始终存在

这组规则看似繁琐，但理解后很简单：auto 是激活 scrollbar-gutter 的关键开关。

@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; } }。这样，即使浏览器不支持 scrollbar-gutter，也能强制显示滚动条来占位，避免布局抖动。这才是真正的“稳字当头”。

别碰 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; }。

真正起效的关键就两行：根元素 + 正确组合 + 渐进回退。漏掉任一环，抖动照常发生。记住这些，你的页面布局就能稳如泰山。