你是否遇到过页面内容在滚动条出现时突然抖动的问题？这种体验相当糟糕，尤其当内容宽度变化导致布局晃动时，用户会明显感到不适。究其原因，是滚动条出现时占用了空间，而之前的布局没有预留。这里有个常见的解决方案：使用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; }。
真正起效的关键就两行：根元素 + 正确组合 + 渐进回退。漏掉任一环，抖动照常发生。记住这些，你的页面布局就能稳如泰山。
