优先用 scrollbar-gutter: stable 写在 html 元素上，不支持时 fallback 为 html { overflow-y: scroll }；滚动条挤内容是因浏览器将其视为真实布局元素占用空间，scrollbar-gutter 可预留空间不显示，兼容 Chrome 94+/Firefox 97+/Safari 16.4+。
直接结论：优先用 scrollbar-gutter: stable，写在 html 元素上；不支持时 fallback 到 html { overflow-y: scroll }。其余方案要么兼容性差，要么引入新问题。
为什么滚动条会挤内容？不是 bug，是默认行为
浏览器把滚动条当「真实布局元素」处理，它占用空间、参与盒模型计算。所以当 overflow-y 从 hidden 变成 auto，视口可用宽度就少了滚动条宽度（通常 12–17px），内容被硬生生往左推——这不是你代码写错了，是规范如此。
常见触发场景包括：
• 鼠标 hover 容器后显示滚动条
• 页面加载后 JS 动态设置 overflow
• 表格或列表区域高度动态变化
scrollbar-gutter: stable 是目前最干净的解法
这个 CSS 属性让滚动条「预留空间但不显示」，彻底切断「出现→占位→跳动」链条。但它有严格使用条件：
立即学习“前端免费学习笔记（深入）”；
- 必须写在
html元素上，body或任意div上无效 - 需搭配
overflow-y: auto或scroll才生效（hidden会禁用 gutter） - Chrome 94+、Firefox 97+、Safari 16.4+ 支持；旧版本自动忽略，需 fallback
- 不依赖滚动条宽度数值，也不需要 JS 检测设备像素比或系统主题
示例写法：
html {
overflow-y: auto;
scrollbar-gutter: stable;
}fallback 方案：强制根元素始终保留滚动条空间
当 scrollbar-gutter 不可用时，退回到「永远显示滚动条」策略。这不是妥协，而是稳定性的底线：
- 写
html { overflow-y: scroll }，比写body更可靠（避开 reset.css 干扰） - 滚动条宽度由系统决定，无需手动填
17px或24px—— 填错反而在 macOS 或高缩放下失效 - 缺点是无溢出时也可见滚动条；如果设计不允许，说明你得接受「跳动」或换交互方式（比如用 modal / drawer 替代长列表）
别碰这些坑：
-
overflow: overlay：仅 Chrome 支持，Firefox/Safari 完全无视，不能作为主方案 -
margin-right: calc(100% - 100vw)：看似聪明，但100vw在移动端可能不准，且某些 Safari 版本计算异常 -
width: calc(100% - 17px)：滚动条宽度根本不是固定值，Win/Linux/macOS/自定义主题下差异很大
真正容易被忽略的点是：这个问题本质不是「怎么隐藏滚动条」，而是「要不要让布局对滚动条存在与否保持中立」。一旦意识到这点，就会发现 scrollbar-gutter 的设计意图非常清晰——它把「占位」和「显示」解耦了。而 fallback 方案里，html 元素上的 overflow-y: scroll 是唯一能绕过所有 CSS 重置干扰的写法，其他地方都可能被覆盖或忽略。
