滚动条挤占内容宽度是浏览器默认行为，非bug；最优解是html元素上使用scrollbar-gutter: stable配合overflow-y: auto，不支持时降级为html { overflow-y: scroll }。
滚动条出现时挤占内容宽度，不是 bug，是浏览器默认行为；但有成熟、轻量、可落地的解法，不需要 JS 计算，也不用 hack。
用 scrollbar-gutter: stable 彻底解耦占位与显示
这是目前最干净的方案：让滚动条「有空间但不出现」，从根源上避免跳动。
- 必须写在
html元素上，写在div或body上无效 - 需搭配
overflow-y: auto或scroll才生效（hidden会禁用 gutter） - 不支持该属性的浏览器（如 Chrome 93–、Safari 16.3–）会自动降级，此时要配 fallback
- 示例：
html { overflow-y: auto; scrollbar-gutter: stable; }
fallback 方案：强制根元素始终保留滚动条空间
当 scrollbar-gutter 不可用时，退回到「永远显示滚动条」的兼容策略，视觉上稳定但略显保守。
- 写
html { overflow-y: scroll; }即可，比设body更可靠（避开 CSS 重置库干扰） - 滚动条宽度由系统决定，无需手动计算 —— 它本就是布局的一部分
- 缺点是无内容溢出时也可见滚动条，若设计不允许，就别硬压这个方案
慎用 overflow: overlay 和手算 17px
这两个方案表面简单，实际埋坑多，只适合特定场景。
-
overflow: overlay是非标准属性，仅 Chrome 支持，Firefox/Safari 完全忽略，无法作为主方案 - 用
calc(100% - 17px)或margin-right: -17px前提是滚动条宽度固定 —— 但 Windows/Linux/ macOS / 自定义主题下宽度不同（12px ~ 24px），移动端更不可靠 - 伪元素隐藏
::-webkit-scrollbar { width: 0 }只影响 WebKit，且可能破坏可访问性（键盘 Tab 仍可聚焦滚动区域）
真正难的不是选哪个方案，而是意识到：滚动条是否占位，本质是「布局稳定性」问题，不是「样式美化」问题。优先用 scrollbar-gutter，fallback 用 html { overflow-y: scroll }，其余都是临时补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
