滚动条挤占内容宽度是浏览器默认行为；现代方案首选 scrollbar-gutter: stable，需写在实际滚动的容器（如 html 或自定义容器）上且配合 overflow-y: auto，safari 16.4+/firefox 97+/chrome 94+ 支持，fallback 用 html { overflow-y: scroll } 或 calc(100% - 100vw) 补偿。
滚动条挤占内容宽度是浏览器默认行为，不是 bug；现代方案首选 scrollbar-gutter: stable，它能跨浏览器预留空间、防止布局抖动，无需 JS 计算或 hack。
scrollbar-gutter 必须写在可滚动的根元素上才生效
这个属性只在同时满足两个条件时起作用：容器有 overflow-y: auto（或 scroll），且该容器本身是实际发生滚动的元素。写在 body 或任意 div 上大概率无效——因为多数情况下，页面级滚动由 html 元素承担。
-
html元素必须显式设overflow-y: auto，否则scrollbar-gutter不触发 - 不要写成
body { scrollbar-gutter: stable }，它不会继承，也不会影响根滚动 - 若用自定义滚动容器（如全屏滚动的
.scroll-container），则scrollbar-gutter要写在那个容器上，且它必须有overflow-y: auto - Safari 16.4+、Firefox 97+、Chrome 94+ 均支持；旧版本会静默忽略，需 fallback
不支持 scrollbar-gutter 时的可靠 fallback
降级策略不是“模拟 overlay”，而是让滚动条空间恒定存在——即强制根元素始终保留滚动条位置，避免动态出现/消失导致的宽度跳变。
- 最简 fallback：
html { overflow-y: scroll }，比设body更稳定，绕过 CSS 重置库干扰 - 如果设计不允许常驻滚动条，可结合
calc(100% - 100vw)补偿：给主体容器加margin-right: calc(100% - 100vw)，有滚动条时自动抵消其宽度 - 避免用
overflow: overlay：它仅 Chromium 曾支持，Firefox 从未实现，Safari 已移除，2026 年已彻底不可用 - 别硬写
padding-right: 17px：滚动条宽度随系统、缩放、主题变化（12–24px），Windows 和 macOS 下完全不同
全屏滚动（scroll-snap）场景下的滚动条处理
使用 scroll-snap-type 实现单页滑动时，滚动条不仅占位，还可能破坏对齐精度和移动端体验。
- 滚动容器（如
.scroll-container）必须同时设scrollbar-gutter: stable both和overflow-y: auto - 隐藏滚动条要分浏览器：Chrome/Edge 用
::-webkit-scrollbar { display: none }；Firefox 用scrollbar-width: none；Safari 不支持隐藏，只能靠scrollbar-gutter稳定空间 - iOS Safari 必须加
overscroll-behavior-y: contain，否则弹性回弹会导致 snap 错位或跳屏 - 千万别给
section设margin-top或margin-bottom：它会改变offsetTop，让 snap 停靠点偏移
真正容易被忽略的是：所有滚动条空间控制逻辑，都依赖「溢出是否真实发生」。哪怕视觉上没看到滚动条，只要 overflow 触发了计算，scrollbar-gutter 就必须与之共存；单独声明等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
