横向滚动条本质是元素撑出视口宽度，需定位溢出源而非掩盖：用outline高亮所有元素快速识别“凸出”者，重点检查img、table、fixed/absolute元素及white-space:nowrap容器，并同步设置html与body的overflow-x:hidden和margin:0。
横向滚动条不是“突然出现”，而是某个元素悄悄撑出了视口宽度——直接加 overflow-x: hidden 只是掩盖，不是定位。
用 outline 一键高亮所有块级元素
这是最快、最不干扰布局的定位方式。浏览器默认不会重排，也不会改变盒模型，比临时加 border 更可靠。
- 在控制台执行：
$$('*').forEach(el => el.style.outline = '1px solid red') - 缩放到出问题的断点（比如
375px宽度），看哪个红色轮廓“凸出”视口右侧 - 重点盯：
img、table、pre、svg、第三方弹窗组件内部的div（有些自带min-width: 320px） - 查完立刻清掉：
$$('*').forEach(el => el.style.outline = '')
检查 body 和 html 的默认行为是否被触发
移动端横向滚动，80% 源于根级默认样式未重置，而非业务代码写错。
-
body默认有margin: 8px，窄屏下直接溢出；必须加body { margin: 0; } -
html默认overflow: visible，仅设body { overflow-x: hidden }无效——iOS Safari 尤其明显，必须同步加html { overflow-x: hidden; } -
html { width: 100vw; }看似无害，但100vw包含滚动条宽度（12–17px），而100%不包含，差值会悄悄撑宽 - 全局重置更稳妥：
html, body { width: 100%; max-width: 100%; }
排查 position: fixed/absolute 元素的 left/right 冲突
这类元素脱离文档流，但它们的双向偏移仍会反推宽度，是 Safari 和 iOS 设备上最隐蔽的溢出源。
- 用 DevTools 的 Elements 面板搜索：
[style*="right"]或[style*="left"]，快速筛出可疑元素 - 重点看是否同时写了
left: 0; right: -20px;—— 浏览器按width = 包含块宽 − left − right计算，结果变成100vw + 20px - 验证方法：控制台运行
$$('body')[0].scrollWidth - window.innerWidth，>1 就基本锁定是它 - 修复不是删
right，而是改用transform: translateX(20px)—— 渲染层位移，不参与盒模型计算
别忽略图片、表格和 flex 子项的隐性撑宽
这些元素默认无视父容器宽度限制，尤其在响应式断点切换时“顶穿”容器。
-
img、video、iframe必须加：max-width: 100%; height: auto; -
table不能只靠width: 100%，要包一层div并设display: block; width: max-content;，且该div必须有明确width或max-width - Flex 容器子项默认
min-width: auto，拒绝收缩——给父容器加min-width: 0（或min-inline-size: 0）才能让它随内容压缩 -
white-space: nowrap容器里，长 URL 或连续字母不换行，直接撑宽；可加overflow-wrap: break-word或word-break: break-all
真正难缠的是那些只在特定 DPR、缩放比或键盘弹出时才暴露的溢出——比如 iOS Safari 地址栏收起后 100vh 变小，但 fixed 元素还按旧尺寸占位。这种得靠 scrollbar-gutter: stable 配合实时 scrollWidth − innerWidth 监控，而不是一次 fix 就一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
