scrollbar-gutter: stable both-edges 必须配合 html { overflow-y: auto } 才生效，仅 Chromium 120+ 原生支持；老浏览器需降级为 html { overflow-y: scroll }，且必须作用于 html 而非 body 元素。
直接写 html { scrollbar-gutter: stable both-edges } 是当前最干净的解法，但必须搭配 overflow-y: auto 才生效，且仅 Chromium 120+ 原生支持；老浏览器得降级用 html { overflow-y: scroll } 加兜底补偿。
为什么 body { overflow-y: scroll } 不管用
滚动条占位行为由根容器决定，html 是文档根元素，它的 overflow 控制视口级滚动逻辑；body 只是普通块级元素，设了 overflow-y: scroll 也影响不了视口宽度分配。常见错误现象包括：页面仍抖动、第三方 UI 库重置了 html 的 overflow、或 body 被父容器（比如某些框架的 wrapper）限制导致规则失效。
实操建议：
- 所有滚动条占位规则必须作用于
html元素，不要写在body上 - 检查项目是否引入了
normalize.css或 Ant Design/Vuetify 等 UI 库，它们可能覆盖html的默认样式 - 若必须兜底，可加
html { overflow-y: scroll !important }，但仅限紧急场景
scrollbar-gutter: stable 怎么写才生效
这个属性不是“独立开关”，它必须和 overflow 配合使用，且只对 overflow: auto 或 overflow: scroll 生效；overflow: hidden 或 visible 下会被忽略。它预留的是滚动条槽位，不改变滚动行为本身，也不让滚动条变粗或变色。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 写法必须是：
html { overflow-y: auto; scrollbar-gutter: stable both-edges; } -
both-edges是规范要求的取值，虽然实际只用右侧空间，但缺一不可 - 不能写成
scrollbar-gutter: stable（缺both-edges），否则部分 Chromium 版本会忽略 - 用
@supports (scrollbar-gutter: stable)包裹新写法，确保老浏览器跳过
兼容性差时怎么降级
Firefox 和 Safari 当前（2026年6月）仍未实现 scrollbar-gutter，Chromium 旧版本（padding-right: 17px 会翻车——Windows 默认约 17px，macOS 悬停才出现且宽度浮动，Firefox 是 16px。靠 JS 测量 offsetWidth - clientWidth 触发重排，且 iframe / 缩放 / 多语言文本下极易失准。
实操建议：
- 降级方案优先用：
body { padding-right: calc(100vw - 100%); }，它动态计算滚动条宽度，无需硬编码 - 配合
html { overflow-y: scroll }和body { width: 100vw; overflow: hidden; }防双滚动条 - 避免
overflow: overlay——已废弃，Chrome/Firefox 均不再响应 - 别用
scrollbar-width: thin或::-webkit-scrollbar改宽，它们只调样式，不解决占位问题
真正难处理的不是写哪行 CSS，而是滚动条宽度本身不是常量：它随系统设置、OS 版本、甚至字体加载完成后的布局重排而变化。所以任何依赖固定像素值的方案，长期看都不可靠。
