100vw 比视口内容宽是因为它包含垂直滚动条宽度（12–17px），而 100% 仅计算可用内容区宽度；误用场景包括轮播容器、Tailwind w-screen、弹窗遮罩层等，易引发横向滚动条；推荐用 100% 或 calc(100vw - var(--scrollbar-width)) 动态补偿。
100vw 为什么比视口内容宽
因为 100vw 是浏览器窗口总宽度，包含垂直滚动条（通常 12–17px），而 100% 是可用内容区宽度，自动扣除滚动条。当页面有 Y 轴滚动条时，100vw > 100%，用 width: 100vw 的元素就会多出那几像素，撑宽 body，触发横向滚动条。
哪些地方容易误用 100vw
常见踩坑位置：
- 轮播容器写成
.slideDiv { width: 100vw; }—— 尤其在移动端出现 Y 滚动条后必出黑边 - Tailwind 中直接用
class="w-screen"（等价于width: 100vw）套在根容器上 - 弹窗遮罩层设
width: 100vw; left: 0;，但未处理right或 transform 偏移 - 伪元素或 JS 动态插入的元素被赋予
100vw宽度，却没同步控制高度/溢出
替代方案：用 100% + calc 补偿滚动条
不用 overflow-x: hidden 掩盖，而是让宽度真正匹配可用区域：
- 优先改用
width: 100%，它天然适配滚动条存在与否 - 若必须用视口单位，写成
width: calc(100% + 0px)—— 看似冗余，但能绕过 Safari 对100vw的小数像素四舍五入异常 - 更稳妥的动态补偿：
width: calc(100vw - var(--scrollbar-width, 0px))，配合 JS 检测并注入 CSS 变量（例如document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.body.clientWidth) + 'px')）
Safari 下特别要注意 right 和 transform 混用
Safari（特别是 macOS Ventura / iOS 16+）在 position: fixed 元素同时设 right 和 transform 时，会把滚动条宽度错误计入包含块宽度，导致计算出的布局宽度偏大。表现是仅 Safari 出横向滚动，且只在缩放 90%/110% 时闪现。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：控制台运行
$$('body')[0].scrollWidth - window.innerWidth，结果 > 1 就基本锁定问题源 - 修复方式：把
right: -10px改成transform: translateX(10px)，后者不参与盒模型计算 - 避免同时设置
left和right—— 浏览器会按width = 包含块宽 − left − right反推，负值right直接放大结果
最麻烦的不是写错，而是某些 UI 库（比如弹窗、Tooltip 组件）内部用 JS 动态写 right 偏移或 100vw 宽度，你改了 CSS 也可能被覆盖。得去 DevTools 的 Styles 面板看 computed 值，再顺藤摸瓜找 JS 注入点。
