在移动端或 Chrome DevTools 模拟小屏幕时，body { overflow-x: hidden } 常无法阻止水平滚动，根本原因在于子容器（如宽度过大的 flex 容器）未正确继承或约束溢出行为，需在父级容器而非 body 上显式设置 overflow-x。
在移动端或 chrome devtools 模拟小屏幕时，`body { overflow-x: hidden }` 常无法阻止水平滚动，根本原因在于子容器（如宽度过大的 flex 容器）未正确继承或约束溢出行为，需在父级容器而非 body 上显式设置 `overflow-x`。
当构建横向滑动面板（例如宽度设为 500% 的 .panels-container）时，开发者常误以为在 <body> 上设置 overflow-x: hidden 就能全局禁用水平滚动。然而在移动设备或响应式调试模式下，该声明往往失效——用户仍可向右拖拽滚动，破坏布局完整性与交互预期。
根本原因在于 CSS 溢出传播机制：overflow 属性不具有继承性，且 body 的 overflow-x: hidden 仅作用于 body 自身的内容盒（content box），而无法约束其子元素产生的「超出视口」的布局流。尤其当某个子容器（如 #panels）未设置明确的 overflow-x，且其子元素（如 #panels-container）通过 width: 500% + display: flex 生成超宽行内布局时，浏览器会将该溢出“透传”至视口层级，绕过 body 的限制。
✅ 正确解法：在直接包裹超宽内容的容器上设置 overflow-x
本例中，#panels 是 #panels-container 的直接父容器，也是逻辑上的横向滚动容器边界。应在此处添加 overflow-x: auto（推荐）或 overflow-x: scroll：
#panels {
overflow-x: auto; /* 关键修复：启用横向滚动条（auto 在无需时隐藏） */
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度 */
}同时，移除 #panels-container 上冗余的 overflow: hidden（它会抑制内部滚动能力），并确保其父容器（#panels）具备明确的尺寸上下文（本例中已满足）。
⚠️ 注意事项与增强实践：
立即学习“前端免费学习笔记（深入）”；
- 避免在 body 或 html 上强设 overflow-x: hidden：易被子元素溢出穿透，且可能干扰 position: fixed 元素的定位表现；
- 添加 viewport 元标签：确认 <meta name="viewport" content="width=device-width, initial-scale=1"> 已存在（本例已有），否则移动端缩放可能导致意外溢出；
- 考虑无障碍与 UX：overflow-x: auto 比 scroll 更友好——仅在内容溢出时显示滚动条；若需强制可见（如教学演示），再用 scroll；
- iOS 兼容增强：追加 -webkit-overflow-scrolling: touch 可启用原生惯性滚动，显著改善触摸体验；
- 测试验证方式：务必在真实移动设备或 Chrome DevTools 的「Device Toolbar」中切换至 iPhone/Android 尺寸，并尝试手指拖拽，而非仅依赖鼠标滚轮。
修复后，无论屏幕多窄，#panels 区域将严格限制水平滚动范围，#panels-container 的 500% 宽度仅用于内部动画位移，不再导致页面整体横向溢出。这一模式也适用于轮播图、时间轴、横向仪表盘等所有需可控横向布局的场景。
