overflow-x: hidden 直接加在 body 或 html 上常无效，因横向滚动根源在于内部元素撑出视口宽度，需同时设置 html 和 body 并配合 max-width: 100%、box-sizing: border-box 等防溢出措施。
为什么 overflow-x: hidden 常常不起作用
直接加 overflow-x: hidden 到 body 或 html 上，大概率没用——因为横向滚动条的根源不在它身上，而在内部某个元素撑出了视口宽度。浏览器会把所有溢出内容“上推”到根容器，但 body 默认是 overflow: visible，且受 html 的盒模型限制，hidden 不会自动生效。
- 必须同时设置
html和body：只设一个会被另一个“透出” -
width: 100vw类样式可能触发隐藏滚动条失效（vw包含滚动条宽度，导致轻微溢出） - 某些 CSS 框架（如 Bootstrap）默认给
body加了padding-right防抖动，反而制造了水平空间占用
真正该加 overflow-x: hidden 的地方
不是全局堵住，而是精准控制“可能越界的容器”。比如轮播图外层、绝对定位弹窗、或使用 display: flex + white-space: nowrap 的横向滚动区。
- 对横向滚动容器本身设
overflow-x: hidden，再用scrollLeft或transform: translateX()控制位移 - 如果只是想隐藏滚动条但保留滚动能力，用
overflow-x: scroll+ 自定义滚动条样式（::-webkit-scrollbar）更稳妥 - 避免在
position: fixed元素上滥用overflow-x: hidden，它可能截断子元素的position: absolute定位范围
max-width: 100% 和 box-sizing: border-box 才是防溢出主力
横向滚动条 80% 来自图片、表格、嵌套 flex 容器或未约束宽度的第三方组件。光靠 overflow-x: hidden 是掩耳盗铃。
- 所有
img标签建议统一加max-width: 100%; height: auto; - 表格加
table-layout: fixed+width: 100%，防止内容撑开 - 父容器务必设
box-sizing: border-box，否则padding+width: 100%必然溢出 - 检查是否有
margin负值或transform: translateX()导致视觉越界但 DOM 仍占空间
移动端 Safari 的特殊坑：viewport 和缩放干扰
iOS Safari 对 overflow-x: hidden 的处理更严格，尤其配合 user-scalable=no 或强制缩放时，容易出现“看不见但可拖动”的伪滚动条。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">中去掉maximum-scale=1.0，否则双击缩放被禁会导致布局计算异常 - 避免在
body上用touch-action: pan-y，它和overflow-x: hidden冲突，反而激活横向拖拽 - 真要禁横向滚动，用 JavaScript 监听
touchmove并preventDefault()更可靠（但仅限明确不需要横向交互的场景）
overflow-x: hidden，而是得一层层查哪个 div 多了 2px 边框、哪张图没设 max-width、或者哪个 flex 子项忘了写 flex-shrink: 0。 
