优先用 scrollbar-gutter: stable 写在 html 元素上；不支持时降级为 html { overflow-y: scroll }。这是唯一能解耦占位与显示的原生方案，现代浏览器均支持，需搭配 overflow-y: auto 或 scroll 才生效。
直接结论：优先用 scrollbar-gutter: stable 写在 html 元素上；不支持时降级为 html { overflow-y: scroll }。其余方案要么失效，要么引入新问题。
为什么滚动条会挤内容宽度
这不是 bug，是浏览器把滚动条当作真实布局元素参与盒模型计算的结果。当 overflow-y 从 hidden 变成 auto，视口可用宽度就少了滚动条宽度（通常 12–24px），内容被硬推左——尤其在 hover 显示、JS 动态设 overflow、表格高度变化等场景下明显跳动。
- 滚动条宽度随系统（Windows/macOS/Linux）、缩放比例、主题设置动态变化，无法靠写死
17px解决 -
overflow: overlay已被 Safari 移除，Firefox 从未支持，Chrome 也仅曾短暂实验性支持，2026 年已不可用 - 写
body { scrollbar-gutter: stable }无效——该属性不继承，且根滚动由html承担
必须写在 html 元素上的 scrollbar-gutter: stable
这是目前唯一能真正解耦「占位」和「显示」的原生方案，现代浏览器（Chrome 94+、Firefox 97+、Safari 16.4+）均已支持。
- 必须搭配
overflow-y: auto或scroll才生效（hidden会禁用 gutter） - 只对实际发生滚动的容器起作用——绝大多数页面的根滚动容器就是
html，不是body - 无需 JS 检测设备、不依赖滚动条宽度数值、不触发重排，一行 CSS 就稳住布局
- 示例写法：
html { overflow-y: auto; scrollbar-gutter: stable; }
不支持 scrollbar-gutter 时的可靠 fallback
旧版浏览器（如 Chrome 93–、Safari 16.3–）会静默忽略该属性，此时必须提供降级策略——不是“模拟 overlay”，而是让滚动条空间恒定存在。
- 写
html { overflow-y: scroll }，比设body更稳定，可绕过各类 CSS reset 库干扰 - 不要手动填
margin-right: calc(100% - 17px)或padding-right: 17px：移动端 100vw 计算不准，且滚动条宽度根本不是固定值 - 如果设计严格禁止常驻滚动条，说明你得接受布局跳动，或改用 modal / drawer 等交互替代长列表
全屏滚动（scroll-snap）场景下的特殊处理
使用 scroll-snap-type 实现单页滑动时，滚动条不仅占位，还可能破坏对齐精度、引发 iOS 弹性回弹跳屏。
- 滚动容器（如
.scroll-container）必须同时设scrollbar-gutter: stable both和overflow-y: auto - 隐藏滚动条要分浏览器：
::-webkit-scrollbar { display: none }（Chrome/Edge）、scrollbar-width: none（Firefox） - iOS Safari 必须加
overscroll-behavior-y: contain，否则弹性回弹会导致 snap 错位
真正容易被忽略的是：这个问题本质不是「怎么隐藏滚动条」，而是「要不要让布局对滚动条存在与否保持中立」。一旦意识到这点，scrollbar-gutter 的设计意图就非常清晰了——它把占位逻辑从渲染流程里抽离出来，交由浏览器统一管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
