scrollbar-gutter: stable 必须作用于 html 元素，因浏览器规范限定其仅对根滚动容器生效；写在 body 或普通元素上无效，且必须搭配 overflow-y: auto 才触发预留逻辑。

scrollbar-gutter: stable 是目前唯一能从布局层稳定盒模型可用宽度的 CSS 方案，它不依赖 JS、不触发重排，但必须写在 html 元素上且搭配 overflow-y: auto 才生效。

为什么 scrollbar-gutter 必须作用于 html 元素

浏览器规范明确限定 scrollbar-gutter 只对根滚动容器（即 html）生效；写在 body、.container 或任何普通 div 上都无效——控制台不会报错，但完全不预留空间。常见误用包括：body { scrollbar-gutter: stable; } 或 .main { scrollbar-gutter: stable; }，这类写法在所有支持该属性的浏览器中均无效果。

必须搭配 overflow-y: auto 才触发预留逻辑

scrollbar-gutter: stable 本身是“惰性”的：它只在滚动行为被激活时才参与布局计算。以下组合效果不同：

• html { scrollbar-gutter: stable; } → 无效果，不预留空间
• html { overflow-y: visible; scrollbar-gutter: stable; } → 被忽略，因无滚动需求
• html { overflow-y: hidden; scrollbar-gutter: stable; } → 同样被忽略
• html { overflow-y: scroll; scrollbar-gutter: stable; } → 冗余，overflow-y: scroll 已强制占位，scrollbar-gutter 不起新作用
• html { overflow-y: auto; scrollbar-gutter: stable; } → ✅ 正确：滚动条按需出现，但槽位始终存在

@supports 回退到 overflow-y: scroll 是最稳兜底

Chromium 120+、Firefox 111+、Safari 17.4+ 支持 scrollbar-gutter，但旧版 Edge、部分安卓 WebView、微信内置浏览器仍不支持。此时不能靠 JS 测量或硬编码 padding-right: 17px，因为：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• macOS 滚动条默认隐藏，宽度为 0
• Windows 主题下滚动条宽度可能为 12–20px
• calc(100vw - 100%) 在字体加载、动态插入内容等时机易产生瞬时闪烁

推荐纯 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），还需额外覆盖：body.modal-open { padding-right: 0 !important; }。

真正起效的关键就三件事：写在 html 上、配 overflow-y: auto、用 @supports 做回退——漏掉任一环，抖动照常发生；而一旦写对，它就在布局计算阶段完成空间预留，比任何运行时测量都干净彻底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！