100vw会将垂直滚动条宽度（12–17px）计入视口宽，导致元素溢出触发横向滚动条；应改用100%、重置html/body样式、避免双向非auto定位及负right值。
100vw 会把垂直滚动条的宽度算进视口宽度，导致元素实际比可用内容区宽出约 12–17px，直接触发横向滚动条——这不是 bug，是规范行为。
为什么 100vw 在有垂直滚动条时会撑出横向滚动条
Chrome/Firefox（Windows）和 Safari（macOS/iOS）在计算 100vw 时，会将当前视口内垂直滚动条的物理宽度（通常 12–17px）计入。而 100% 是基于父容器「内容区」计算的，天然排除滚动条占位。
- 页面初始无滚动条 →
100vw ≈ 100% - 用户滚动后出现垂直滚动条 →
100vw = window.innerWidth + 滚动条宽度，但父容器（如body）内容区仍是window.innerWidth - 此时设了
width: 100vw的元素就会超出内容区，拉宽document.body.scrollWidth
验证方法：打开 DevTools 控制台，运行 $$('body')[0].scrollWidth - window.innerWidth，若结果 > 1，基本可确认是 100vw 引发的溢出。
fixed 元素用 right: -Xpx 配合 100vw 更容易翻车
当 position: fixed 元素同时设置了 left: 0 和 right: -20px，浏览器会按「包含块宽 − left − right」反推宽度 → 实际宽度变成 100vw + 20px。Safari 在 DPR=2 设备上对小数像素四舍五入更敏感，body.scrollWidth − window.innerWidth 可能返回 15.2 这类非整数值，滚动条闪现。
立即学习“前端免费学习笔记（深入）”；
- 不要写
left: 0; right: -10px;—— 双向非 auto 偏移是横向滚动条高发场景 - 改用
transform: translateX(10px)替代负值right，它不参与盒模型计算 - 若必须用
right，确保其为非负值，且只设单边（left或right）+ 显式width
真正有效的修复组合（不是掩盖）
靠 overflow-x: hidden 掩盖只是临时止痛，以下三步才能根治：
- 全局重置：
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; }—— 干掉默认margin: 8px和隐式溢出 - 替换单位：所有原本用
100vw的全屏容器（如 banner、header），统一改为width: 100%；Grid/Flex 容器优先用fr或minmax()配合min-width: 0 - 媒体资源兜底：
img, svg, video { max-width: 100%; height: auto; }，防止原始尺寸硬撑
特别注意：在 Vue/React 单文件组件中，<style scoped></style> 不会影响 html 和 body，必须额外加一个全局 <style></style> 块来应用上述重置。
移动端 fixed 元素别信 100vw 和 right: 0
iOS Safari 在地址栏收放、键盘弹出时会动态调整可视区域高度，但 100vw 值不变。此时若配合 right: 0，元素可能被“挤”到视口右侧不可见区——你以为它消失了，其实是横向滚动后藏起来了。
- 固定定位元素优先用
inset: 0（支持现代浏览器）或left: 0; width: 100% - 避免在
transform中写calc(1vw - 4px)，Safari 16.4+ 才稳定支持 - 慎用
will-change: transform，它不触发合成层，反而可能引发内存警告
最常被忽略的点是：你改了某个组件的样式，但 html 和 body 的默认行为没动，所有修复都白搭。
