<p>用 calc(100vw - 100%) 补齐滚动条宽度可防页面跳动，但须加在具体容器（如 .wrap-outer）上；100vw 含滚动条宽致 iOS Safari 弹性回弹，100dvw 更优但需兼容降级，overflow-x: hidden 必须加在 html 上兜底。</p>
直接用 calc(100vw - 100%) 补齐滚动条宽度，就能稳住页面不跳——但必须加在具体容器上，不能加在 body 或 html 上，否则会留白或失效。
为什么 100vw 会导致左右抖动
因为 100vw 是按 window.innerWidth 计算的，它把滚动条宽度（Windows 常为 17px，macOS 隐藏时为 0）也算进去了；而 100% 是父容器可用宽度，不含滚动条。当内容刚好撑满时，100vw 容器就比视口宽出那几像素，触发 iOS Safari 的弹性回弹机制，松手后“咔哒”一下回弹。
验证方式很简单：
- 在控制台运行 document.documentElement.scrollWidth > document.documentElement.clientWidth，返回 true 就说明存在隐性横向溢出
- 或者给 body 加 outline: 1px solid red，一眼看出哪个元素偷偷宽了一点
calc(100vw - 100%) 的正确用法
这个差值就是当前滚动条宽度（有则为真实值，无则为 0），用来做补偿最自然。但它不是万能胶，得贴对地方：
- ✅ 推荐加在「居中定宽主体」的直接父容器上，比如
.wrap-outer，再让主体设margin: 0 auto - ❌ 别加在
body上：会导致页面最左侧出现空白 - ❌ 别加在
html上：根元素加了会影响整个滚动行为，可能破坏 iOS 原生弹性滚动 - ⚠️ 如果容器本身是
position: absolute且right: 0，记得父级加overflow: hidden，否则可能向右溢出 1px
现代浏览器优先用 100dvw
100dvw（dynamic viewport width）是 Chrome 108+、Safari 16.4+、Firefox 112+ 支持的新单位，它自动排除滚动条占位，语义更清晰，也不用算差值。但兼容性还没到“甩开不管”的程度，所以建议这样写：
立即学习“前端免费学习笔记（深入）”；
width: 100dvw; width: calc(100vw - 100%); width: 100%;
注意顺序：从新到旧降级。别指望 @supports (width: 100dvw) 能兜住所有情况——某些 WebView（如微信 X5）会假阳性识别，反而让降级逻辑失效。
横向溢出的终极防线是 overflow-x: hidden
它必须加在 html 元素上才真正起效，因为移动端浏览器的根滚动容器是 html，不是 body。加在 body 上等于没加，还可能干扰滚动体验。
顺带一提：overflow-x: hidden 是兜底手段，不是替代方案。它藏起了问题，但没解决根源——比如图片没设 max-width: 100%、input[type="number"] 的默认内边距撑宽容器，这些都该单独修。否则一旦某天去掉这句，抖动立刻回归。
