滚动条出现导致内容区压缩、布局晃动是盒模型默认行为，根本解法是html{scrollbar-gutter:stable both-edges}，chromium120+/firefox111+/safari17.4+支持，旧版需calc(100vw-100%)降级。
滚动条出现时内容区被压缩、布局左右晃动，不是 bug，是盒模型的默认行为——overflow: auto 或 overflow: scroll 下，classic scrollbar（Windows/Linux/旧 macOS）会从 content-box 里硬抠走约 16–17px，导致所有依赖精确宽度的元素位移。唯一标准解法是 scrollbar-gutter: stable both-edges，但必须用对位置、时机和降级逻辑。
scrollbar-gutter 必须作用于 html 或 body 才生效
这个属性只在滚动容器上起作用，而页面级滚动容器是 html 元素（不是 body）。写在普通 div 上完全无效；写在 body 上也仅在部分浏览器中“碰巧”工作，不可靠。
-
html是根滚动容器，scrollbar-gutter必须设在这里才能影响整个视口布局计算 - 值必须是
stable both-edges：规范强制要求双侧对称，即使实际只占右侧空间 - 仅当
overflow-y: auto或overflow-y: scroll同时存在时才触发预留逻辑；overflow: hidden或visible会直接忽略它 - Chromium 120+（Chrome/Edge 120 起）、Firefox 111+、Safari 17.4+ 已支持；低于这些版本需 fallback
别信 scrollbar-width: none 能止抖
scrollbar-width: none 只隐藏滚动条 UI，不改变占位逻辑。内容区依然被压缩，布局照样跳——它和 overflow: auto 组合，等于制造“隐形可滚”，反而更难调试。
-
scrollbar-width: none+overflow: auto= 视觉上没滚动条，但盒模型宽度仍突变 -
overflow: scroll强制显示滚动条，虽稳定但多出无用空白区域，移动端尤其明显 - 真正要的是“空间预留”，不是“视觉隐藏”——这是设计意图的根本错位
老浏览器 fallback：用 calc(100vw - 100%) 动态补 padding
不支持 scrollbar-gutter 的环境（如 Safari body 自动补偿滚动条宽度，且无需 JS 测量或重排。
- 在
html上设scrollbar-gutter: stable both-edges，同时在body上加：padding-right: calc(100vw - 100%); - 该表达式在有滚动条时返回正值（≈17px），无滚动条时为 0，天然适配不同设备
- Safari 16.4+ 才完整支持
calc(100vw - 100%)动态计算；若需兼容更老版本，首次加载后用 JS 写死：document.body.style.paddingRight = (window.innerWidth - document.body.clientWidth) + 'px'; - 切勿用
margin-right替代——它不参与 box-sizing 计算，无法撑开容器边界
modal-open 场景下 overflow: hidden 不再引发位移
弹窗打开时设 body { overflow: hidden } 常见，但若没提前预留滚动条空间，关闭时宽度会回弹，连带 fixed 导航栏左右晃。关键不在锁不锁滚，而在空间是否早已留好。
- 只要
html已设scrollbar-gutter: stable both-edges，body.modal-open { overflow: hidden; }就不会导致位移 - 此时
overflow: hidden仅禁用滚动行为，不改变布局尺寸——因为空间早在初始渲染时就分配好了 - 若未启用
scrollbar-gutter，则必须配合padding-right: calc(100vw - 100%)，否则overflow: hidden一加一去，body 宽度就跳
真正容易被忽略的点是：scrollbar-gutter 不是“开了就稳”，它必须和 overflow 成对出现、必须作用于 html、必须在 CSS 加载早期就生效。任何延迟注入、JS 动态 patch 或 selector 优先级不足，都会让预留失效——抖动就在那一帧里发生，且无法靠重绘挽回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
