应将 overflow-x: hidden 加在直接包裹超宽内容的父容器上，而非 body；因 body 不是裁剪边界，超宽子元素会透传至视口，导致移动端横向滚动仍生效。
直接在 body 上加 overflow-x: hidden 几乎总是失效，这不是你写错了，而是它本就不该管这事。
为什么 body { overflow-x: hidden } 在移动端根本拦不住滚动
浏览器不会把 body 当作“裁剪边界”——它只对自身内容盒（content box）生效，而真正撑宽页面的往往是某个子容器（比如一个 width: 500% 的轮播容器）。这个超宽元素一旦没被它的**直接父容器**约束，就会“透传”到视口层级，绕过 body 的限制。iOS Safari 尤其明显：你能看见滚动条消失，但手指一拖，页面照样横向滑动。
常见错误现象包括：
- Chrome DevTools 切换手机模拟器后，
body的overflow-x: hidden突然不生效 - 用户双击放大或强制缩放后，横向滚动重新出现
- 明明没滚动条，却能拖拽出空白区域（“看不见但可拖”）
真正该加 overflow-x 的地方是哪个容器
必须找到那个**直接包裹超宽内容**的父容器。比如结构是 <div id="panels"><div id="panels-container" style="width: 500%"></div></div>，那么修复点就是 #panels，不是 body，也不是 #panels-container 自身。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
#panels { overflow-x: auto; -webkit-overflow-scrolling: touch; }——auto比hidden更安全，只在需要时启用滚动，且保留惯性滑动 - 保留
#panels-container { overflow: hidden; }，它负责内部裁剪，和#panels的横向控制不冲突 - 确保
#panels有明确的尺寸上下文（比如width: 100vw或已设max-width），否则 BFC 不触发，overflow仍可能被忽略
光靠 overflow-x 还不够，这些细节决定成败
溢出常是组合问题：一个图片没设 max-width: 100%，加上 box-sizing: content-box 的 padding，再碰上 white-space: nowrap 的长文本，overflow-x: hidden 就彻底失效。
必须同步检查：
-
<meta name="viewport">是否完整？推荐content="width=device-width, initial-scale=1"，去掉maximum-scale=1.0和user-scalable=no，否则 iOS 缩放逻辑会干扰宽度计算 - 所有
<img alt="如何解决CSS移动端横向滚动条溢出_设置overflow-x: hidden" >加max-width: 100%; height: auto;；表格加table-layout: fixed; width: 100%; - 避免在
body上用touch-action: pan-y，它和overflow-x: hidden冲突，反而激活横向拖拽 - Flex 子项若没设
flex-shrink: 1，默认不收缩，会顶破父容器——这是移动端溢出最隐蔽的来源之一
当 CSS 确实扛不住时，JavaScript 是最后一道防线
如果业务场景明确禁止任何横向交互（比如全屏竖向阅读页），CSS 控制不稳定时，可以用 JS 强制拦截：
document.body.addEventListener('touchmove', e => { if (e.target === document.body || e.target.closest('.no-hscroll')) e.preventDefault(); }, { passive: false });
注意：passive: false 必须显式声明，否则 preventDefault() 无效；且只对特定 class 容器启用，避免误伤表单输入等正常交互。
真正难的从来不是加一行 overflow-x: hidden，而是搞清哪一层容器该承担裁剪责任、哪类内容会悄悄撑破边界、以及移动端浏览器如何“选择性执行”你的 CSS 声明。
