滚动条占位导致布局抖动的根源是浏览器按需显示垂直滚动条时占用内容区宽度，使元素横向偏移；解决方案首选html{overflow-y:scroll}强制常驻，或现代方案html{scrollbar-gutter:stable;overflow-y:auto}预留空间并降级兼容。
滚动条占位导致布局抖动的根源
浏览器默认在需要时才显示垂直滚动条，而滚动条宽度会从内容区“偷”走一部分空间。当页面高度刚好跨过触发滚动条的阈值（比如从不需滚动到需要滚动），body 的可用宽度突然减少，所有块级元素（尤其是 width: 100% 或 max-width 类型）会向左偏移——这就是横向跳动的本质。它和 overflow 计算时机、渲染管线重排都有关，但最直接的干预点就是让滚动条始终存在或始终不占位。
强制滚动条常驻：用 overflow-y: scroll 最简单
这个方案不是“隐藏滚动条”，而是让它一直可见、一直占位，从而消除宽度突变：
overflow-y: scroll 最简单
这个方案不是“隐藏滚动条”，而是让它一直可见、一直占位，从而消除宽度突变：
常见错误现象：
有人写 body { overflow-y: scroll } 却发现没生效——因为父容器（如 html）可能限制了溢出行为。
使用场景：后台管理页、表单页、任何内容高度易变且不允许视觉跳动的页面。
参数差异：scroll 强制显示滚动条（即使内容不溢出），auto 是默认行为（按需显示），hidden 会截断内容且不解决跳动。
性能 / 兼容性影响：无性能损耗；所有现代浏览器支持，包括 Safari 16.4+ 对 scrollbar-gutter 的支持前，这是最稳的兜底方案。
实操建议：
- 加在
html或body上均可，但推荐html { overflow-y: scroll }，避免某些 CSS 重置库对body的干扰 - 配合
html { scrollbar-gutter: stable both-edges }（见下一条）可进一步优化体验 - 如果设计上真不能接受可见滚动条，不要硬 hide，换方案
用 scrollbar-gutter: stable 预留空白但不显示滚动条
CSS 新增的 scrollbar-gutter 属性能在不显示滚动条的前提下，为它预留固定宽度空间，彻底解耦“占位”和“可见”：
常见错误现象：
写了 scrollbar-gutter: stable 却没效果——因为该属性只对根元素（html）生效，且必须搭配 overflow-y: auto 或 scroll；单独设在 div 上无效。
使用场景：面向公众的官网、营销页等对滚动条外观敏感，又不能容忍跳动的项目。
参数差异：stable 表示预留空间，both-edges 表示左右两侧都预留（兼容双滚动条旧逻辑，实际只需 stable）；auto 则退化为默认行为。
性能 / 兼容性影响：极轻量；Chrome 94+、Firefox 97+、Safari 16.4+ 支持；不支持时自动降级为原生行为（有跳动），需搭配上面的 overflow-y: scroll 做 fallback。
实操建议：
- 必须写在
html元素上：html { scrollbar-gutter: stable; overflow-y: auto } - 不要和
overflow-y: hidden同时用，否则 gutter 不触发 - 若需兼容老浏览器，用 @supports 包一层，fallback 到
overflow-y: scroll
立即学习“前端免费学习笔记（深入）”；
为什么不用 overflow-y: overlay 或自定义滚动条
overlay 是 WebKit 旧私有属性，语义是“滚动条叠加在内容上”，听起来能解决问题，但实际：
常见错误现象：
设了 body { overflow-y: overlay }，结果 Chrome 完全忽略，Safari 行为也不一致；更糟的是，它不保证 gutter 预留，仍可能引发微小重排。
使用场景：基本没有可靠使用场景；现代标准已明确用 scrollbar-gutter 替代。
参数差异：overlay 是历史遗留，无规范定义，各引擎实现随意；scrollbar-gutter 是 W3C 标准，行为可预测。
性能 / 兼容性影响：无优势；Safari 已在 16.4+ 中标记 overlay 为废弃；自定义滚动条（如 ::-webkit-scrollbar）只能改样式，无法控制占位逻辑，对跳动问题零帮助。
实操建议：
- 删掉所有
overflow-y: overlay相关代码 - 避免用
::-webkit-scrollbar配合width: 0等 hack 隐藏滚动条——这会让 gutter 彻底消失，跳动照旧 - 如果设计强制要求“无滚动条 + 无跳动”，唯一靠谱路径是
scrollbar-gutter: stable+ 优雅降级
真正难的不是选哪个 CSS 属性，而是意识到：滚动条占位是布局层问题，不是样式层问题。一旦把 html 的 overflow 和 scrollbar-gutter 当作页面基础盒模型的一部分来配置，而不是“美化滚动条”的附属操作，抖动就自然消失了。
