滚动条真实占用content-box宽度，因其属于盒模型内容区内部空间，会从width中扣除约16–17px；唯一标准解法是scrollbar-gutter: stable both-edges，它强制预留滚动条空间以保持布局稳定。
滚动条为什么真实占用 content-box 宽度
滚动条不是“画在上面”的装饰，而是盒模型的一部分——只要 overflow 是 auto 或 scroll，且浏览器渲染 classic scrollbar（Windows/Linux/旧 macOS），它就会从 content-box 里硬生生“扣走”约 16–17px。这不是 bug，是 CSS 规范定义的布局行为：滚动条区域属于内容区内部空间，不额外增加容器尺寸，只压缩可用宽度。
常见误判是以为 ::-webkit-scrollbar 或 scrollbar-width: thin 能解决这个问题——它们只改样式或视觉宽度，不改变占位逻辑。即使把滚动条设为 none，overflow: auto 下内容区仍被压缩。
- macOS Safari/Chrome 在“自动隐藏”模式下，仍会在 layout 阶段预留 ~15px 空间（取决于系统设置），无法用 CSS 关闭
- Firefox 的
scrollbar-width: thin会缩小占位宽度，但仅限 Firefox；Chromium 不支持该长度值，thin仅作提示，实际仍按系统默认占位 - 用
overflow: overlay曾是 workaround，但 Chromium 110+、Firefox 90+ 已废弃该值，写上也无效
scrollbar-gutter: stable both-edges 是唯一标准解法
scrollbar-gutter: stable both-edges 告诉浏览器：“不管滚动条显不显示，都按它存在来分配空间”。它不隐藏滚动条、不改变滚动行为，只修正布局计算时机——让 content-box 宽度恒定，彻底消除因滚动条出现/消失导致的抖动。
这个属性必须作用于滚动容器本身，通常是 html 或 body；写在普通 div 上无效。且仅在 overflow: auto 或 scroll 下生效。
立即学习“前端免费学习笔记（深入）”；
- Chromium 120+（Chrome/Edge）、Firefox 111+、Safari 17.4+ 支持；老版本需降级
- 值必须是
stable both-edges，规范要求双侧对称，哪怕只用右侧 - 不能和
scrollbar-width: none混用——后者不解决占位问题，反而可能掩盖抖动根源
不支持 scrollbar-gutter 时怎么兜底
降级方案不能靠 JS 动态测宽（clientWidth - offsetWidth），既不准又触发重排；也不能依赖 padding-right 写死像素值（不同设备/缩放比下滚动条宽度不同）。
最稳的 fallback 是：body { padding-right: calc(100vw - 100%); }。这个表达式利用视口宽度与文档宽度的差值，自动得出当前滚动条宽度，且不依赖 JS。
- 若容器有固定高度或
max-height，记得加box-sizing: border-box，否则 padding 可能引发额外溢出 - 触屏设备（iPad、Android Chrome）通常用 overlay scrollbar，不占空间，可用
@media (hover: none)移除该 padding - 避免对
html直接设padding，它会影响根元素的滚动行为；优先作用于body
为什么 box-sizing: border-box 不能解决滚动条占位
box-sizing: border-box 控制的是 padding 和 border 是否计入 width，但它完全不包含滚动条——滚动条宽度独立于盒模型计算之外。给一个 width: 100% 的容器设 padding: 16px 和 box-sizing: border-box，它仍会因滚动条再被压缩约 16px。
真正影响布局的是 overflow 类型 + 滚动条是否常驻，而不是盒子本身的尺寸声明方式。
- 检查 DevTools 的 Layout 面板，看 “Computed” 里的
width是否真变小了——大概率是scrollbar-gutter缺失或系统级留白在作祟 - 不要对
html或body直接写::-webkit-scrollbar，它们的盒模型受 UA 样式和文档流影响更大，优先约束明确高度的div容器 - 移动端 WebKit（如 Safari iOS）对
scrollbar-gutter支持滞后，目前仍需结合@media (pointer: coarse)单独处理
滚动条占位问题本质是布局稳定性问题，不是样式美化问题。越晚引入 scrollbar-gutter，越容易在老浏览器或特殊设备上暴露抖动——它必须作为基础样式提前写进 reset.css，而不是等 UI 交付前才补。
