在移动端或 Chrome DevTools 移动视图下，body { overflow-x: hidden } 常因父容器宽度计算异常而失效，导致意外水平滚动；根本解法是将 overflow-x: auto/scroll 显式应用于直接包裹超宽内容的容器（如 #panels），而非依赖 body 全局控制。
在移动端或 chrome devtools 移动视图下，`body { overflow-x: hidden }` 常因父容器宽度计算异常而失效，导致意外水平滚动；根本解法是将 `overflow-x: auto/scroll` 显式应用于直接包裹超宽内容的容器（如 `#panels`），而非依赖 `body` 全局控制。
当构建横向滚动动画（例如多面板轮播、全屏横向布局）时，开发者常通过设置容器宽度为 500% 并配合 overflow-x: hidden 来隐藏溢出内容。然而在移动设备上，该策略极易失效——用户仍可向右拖拽滚动，破坏视觉完整性与交互预期。
问题根源在于：body 的 overflow-x: hidden 并不能强制约束其子元素中由 flex、width: 500% 或 white-space: nowrap 等引发的视口外渲染行为。尤其在移动端，浏览器会基于 viewport 元数据和初始缩放逻辑重新计算布局上下文，若最外层滚动容器（如 #panels）未显式声明 overflow-x，则其内部超宽子元素（如 #panels-container）会“穿透”到视口层级，触发默认滚动。
✅ 正确解决方案：将 overflow-x: auto（推荐）或 overflow-x: scroll 应用于直接承载超宽内容的语义化父容器（即 #panels），而非 body 或 .intro 等兄弟区块：
/* ✅ 关键修复：为 #panels 设置 overflow-x */
#panels {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度 */
}
/* 保持 #panels-container 内部 overflow: hidden（防内部溢出） */
#panels #panels-container {
height: 100vh;
display: flex;
flex-wrap: nowrap;
padding: 0;
overflow: hidden; /* 此处仅控制内部，不作用于视口 */
background-color: #ddd;
}同时需确保 HTML 结构中 #panels 是 #panels-container 的直接且唯一父容器，避免嵌套层级过深导致样式继承断裂。此外，务必检查 <meta name="viewport"> 是否完整：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
⚠️ 注意事项：
- 不要移除 #panels-container { overflow: hidden } —— 它防止面板内元素意外溢出；
- 避免对 body 或 html 设置 overflow-x: hidden 作为主要控制手段，因其在移动端兼容性差且易被浏览器忽略；
- 若需完全禁用滚动（非仅隐藏），应结合 touch-action: none 和 JavaScript 阻止默认事件，但需谨慎评估可访问性影响；
- 在 Safari/iOS 上，添加 -webkit-overflow-scrolling: touch 可显著改善滚动惯性和响应速度。
通过将滚动控制权精准下沉至语义容器，既符合 CSS 盒模型规范，又兼顾各端渲染一致性，是构建可靠横向动效布局的必备实践。
