真正修复横向滚动需设 html { overflow-x: hidden; } 并重置 body { margin: 0 }，同时约束 img/video/iframe 等替换元素 max-width: 100%，flex 容器加 min-width: 0，表格外层 div 设 overflow-x: auto + width + table-layout: fixed。
直接给 body 或 html 加 overflow-x: hidden 不能真正修复横向滚动，它只是把溢出藏起来——下次 JS 插入一个没约束的 div，滚动条立刻回来。
为什么 overflow-x: hidden 在移动端经常失效
根本不是属性写错了，而是裁剪作用域没落到真正撑宽的元素上。iOS Safari 的根滚动容器是 html，但很多开发者只改了 body；更常见的是：某个 #panels 容器实际宽度超了，而它的父级没设任何溢出控制，浏览器就把横向溢出“透传”到了视口。
-
html必须设overflow-x: hidden（body不管用） - 同时要重置
body { margin: 0 }，否则默认 8px × 2 就能触发滚动 - 避免用
width: 100vw：Windows 下它包含滚动条宽度（约 17px），实际比视口宽 - 真机测试时，键盘弹出或缩放后，
overflow-x: hidden可能被 WebKit 临时忽略
图片、视频、iframe 撑宽页面的隐蔽原因
一张没加约束的 <img src="banner.jpg"> 就足以让整个页面在小屏上横向溢出——这不是 bug，是默认行为：替换元素按原始尺寸渲染，不自动缩放。
- 全局加
img, video, iframe, canvas { max-width: 100%; height: auto; } - 如果这些元素在
flex容器里，还得给其父容器加min-width: 0，否则 flex item 默认min-width: auto，拒绝收缩 - 检查伪元素（如
::before）是否生成了不可见但占空间的内容，用 DevTools 的 “Layout” 面板看scrollWidth > clientWidth
浮动和 inline-block 元素引发的间隙溢出
HTML 换行或缩进产生的空白字符，会被渲染成 4–8px 间隙。4 个 float: left 元素各占 width: 25%，光间隙就可能多出 20px+，直接撑破视口。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：
.parent { font-size: 0; }，再给每个子项重设font-size - 根治方式：全局加
* { box-sizing: border-box; }，并改用display: flex或grid - 别对浮动父容器用
overflow: hidden清浮动——它会裁剪position: absolute子项；改用display: flow-root（Safari 15.4+ 支持良好） - 调试时给父容器加
outline: 1px solid red，一眼看出子项是否“凸出来”
表格响应式滚动不生效的硬性条件
<table> 直接加 overflow-x: auto 永远无效。滚动必须由外层 <div> 承担，且需同时满足三个条件：
- 外层
<div class="table-container">必须设overflow-x: auto和明确宽度（如width: 100%） -
<table>要加table-layout: fixed，否则列宽由内容撑开，滚动失去前提 - 所有
<td>和<th>必须统一设white-space: nowrap，防止换行干扰宽度计算 - 移动端卡顿？必须加
-webkit-overflow-scrolling: touch（仅 iOS Safari 有效）
最麻烦的其实是那些动态注入的浮动元素，比如某些 UI 库的 Tooltip，JS 里写了 right: -10px 却没清理，你加了 flow-root 也拦不住——得靠 DevTools 筛选 [style*="right"] 手动揪出来改。
