横向滚动条本质是元素撑出视口，需定位溢出源而非掩盖：用devtools比对body宽度与window.innerwidth，加outline高亮超宽元素，重点检查img、table、absolute/fixed元素及white-space:nowrap容器；html和body须同时设overflow-x:hidden，全局重置box-sizing:border-box，并为媒体元素设max-width:100%。
横向滚动条不是“出现了”，而是某个元素悄悄撑出了视口宽度——overflow-x: hidden 加在 body 或 html 上，90% 的情况只是掩盖问题，不是解决问题。
怎么快速定位是哪个元素撑出视口
别猜，用浏览器 DevTools 直接测：
- 打开手机模拟器（或真机远程调试），右键 →「检查」→ 切到「Toggle device toolbar」
- 选中
body，看右侧「Computed」面板里的width值是否 >window.innerWidth - 在控制台运行：
getComputedStyle(document.body).width和window.innerWidth对比，差值超过 1px 就说明有溢出源 - 临时给所有块级容器加
outline: 1px solid red，一眼看出哪个框画到了视口外 - 重点盯三类高危元素：
img、table、position: absolute或fixed的弹窗、以及用了white-space: nowrap的行内容器
为什么 overflow-x: hidden 加在 body 上经常失效
因为浏览器的溢出传播机制：根元素（html）默认 overflow: visible，而 body 的 overflow-x: hidden 会被 html “透出”——两者必须同时设才起效。
-
html { overflow-x: hidden; }是 iOS Safari 必加项，否则会出现“看不见但可拖动”的伪滚动条 -
body { margin: 0; }必须配，浏览器默认margin: 8px，窄屏下直接触发横向滚动 - 只设
body不设html，或反过来，都会失效 - 某些 UI 框架（如 Bootstrap）会给
body加padding-right防抖动，这本身就会占掉几像素水平空间，反而制造溢出
表格、图片、Flex 容器这些高频溢出源怎么处理
它们不是“不听 overflow-x”，而是默认行为就绕过溢出检测：
-
img、video、iframe统一加：max-width: 100%; height: auto; -
table必须包在<div class="table-responsive"> 里（Bootstrap）或手动设：<code>display: block; width: max-content;，且父容器要有明确width或max-width -
flex容器若子项撑宽，仅overflow-x: hidden不够，必须加：min-width: 0;（对 flex）或min-inline-size: 0;（对 grid） -
white-space: nowrap容器里，子元素如果是div，得显式设display: inline-block或display: inline-flex，否则它仍按块级换行逻辑走 - 所有涉及
box-sizing的地方，全局重置：* { box-sizing: border-box; }，否则width: 100%+padding必然溢出 -
<meta name="viewport" content="..., maximum-scale=1.0">会干扰布局计算，建议去掉maximum-scale -
touch-action: pan-y和overflow-x: hidden冲突，可能意外激活横向拖拽，慎用 - 如果真要禁横向滑动（比如全屏菜单），用 JS 更可靠：
document.body.addEventListener('touchmove', e => e.preventDefault(), { passive: false }); -
-webkit-overflow-scrolling: touch只对旧版 iOS 有效，现代 Safari 已默认启用惯性滚动，但保留无害
移动端 Safari 的几个硬坑要绕开
iOS 对横向溢出更敏感，且部分限制是渲染层硬编码的：
最常被忽略的一点：第三方组件（尤其是轮播图、图表库、富文本编辑器）可能偷偷加了 white-space: nowrap、width: 100vw 或未处理字体加载时的 layout shift，这类问题只能靠逐层加 overflow-x: hidden 缩小范围，再查 computed 样式定位源头。
