body { overflow-x: hidden } 失效是因为 overflow-x 仅裁剪直接子元素，而移动端撑宽页面的常是嵌套更深的容器（如 #panels-container），其溢出会穿透至视口层级；必须在最靠近溢出源、有明确宽度的父容器（如 #panels）上设置 overflow-x: hidden，并确保 width、min-width: 0 等属性正确，同时配齐 viewport、body 重置和 box-sizing。
body { overflow-x: hidden } 为什么经常失效
因为 overflow-x 只对「直接子元素」的溢出内容起裁剪作用，而移动端真正撑宽页面的往往不是 body 的子节点，而是嵌套更深的容器（比如 #panels-container）。body 设置了 overflow-x: hidden，但它的子元素 <main></main> 没创建 BFC，导致内部超宽元素的横向溢出“穿透”上来，浏览器最终把滚动交给视口处理——你看到的滚动条，其实是 html 或视口层级的，不是 body 的。
常见干扰项包括：float、position: absolute 让父容器脱离文档流；display: inline-block 引发行内布局异常；父容器缺失 width 或 max-width 导致宽度计算失控。
必须加在哪个容器上才真正生效
找离溢出源最近的、有明确边界（即设置了 width 或能被视口约束）的父容器。例如轮播场景中，若 #panels-container 是真正宽 500% 的元素，那它的直接父级 #panels 就是裁剪锚点：
code#panels {
width: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}这个容器还必须满足：
立即学习“前端免费学习笔记（深入）”；
- 不能是
float或absolute定位 - 推荐显式设
width: 100%或max-width: 100% - 避免
padding+width: 100%组合，除非已设box-sizing: border-box
容易被忽略的三个基础配置
很多问题根本不出在 overflow，而出在渲染起点：
-
<meta name="viewport" content="width=device-width, initial-scale=1">缺失或被覆盖 → 移动端缩放逻辑错乱，100vw 计算失准 -
body { margin: 0; padding: 0; }未重置 → 浏览器默认 8px 外边距直接贡献 16px 水平溢出 -
* { box-sizing: border-box; }未全局设置 →padding和border持续加宽元素，尤其在 flex/grid 子项中
这三项不配齐，单靠 overflow-x: hidden 就是打补丁，随时会漏。
长链接、图片、绝对定位这些“隐形撑宽元凶”怎么防
它们不会报错，但会在小屏下突然触发滚动：
- 长 URL：给文本容器加
overflow-wrap: break-word（不是word-break: break-all，后者会断单词） - 图片：必须设
max-width: 100%; height: auto;，img标签本身不响应式 - 绝对定位元素：检查
left/right值是否超出父容器，更稳妥的是用transform: translateX()替代偏移 - Flex 子项：如果内容可能超宽（如图标+文字），加
min-width: 0防止 flex 项拒绝收缩
真机测试前，先在 Chrome DevTools 的 Rendering 面板勾选「Highlight overflows」，红色标记会直接暴露谁在偷偷撑宽——比猜快十倍。
