不够，必须同时给 html 和 body 设置 overflow-x: hidden；仅设 body 会因 safari 滚动上下文透传而失效，正确写法为 html, body { overflow-x: hidden; overflow-y: auto; }。
直接加 overflow-x: hidden 就够了吗？
不够。只给 body 加 overflow-x: hidden 在 iOS 上大概率失效，因为 Safari 会把滚动上下文“透传”给 html 元素。必须同时作用在 html 和 body 上，否则左右滑动照常发生。
实操建议：
-
html, body { overflow-x: hidden; overflow-y: auto; }是最基础且兼容性最好的写法 - 别漏掉
html—— iOS Safari 的滚动根节点是html，不是body - 加上
overflow-y: auto（或scroll）明确保留垂直滚动能力，避免误伤 - 如果页面有固定定位的弹层或遮罩，需单独给它们加
overflow-x: visible，否则会被父级裁剪
为什么有时候加了还是能左右滑？
常见原因是内容溢出没被真正截断。比如子元素设置了 width: 100vw 但又带了 padding 或 border，实际宽度超过视口；或者用了 transform: translateX()、flex 布局撑开容器。
排查和修复建议：
- 用浏览器开发者工具检查是否有元素的
computed width>100vw - 对可能溢出的容器加
box-sizing: border-box - 慎用
white-space: nowrap+ 长文本，它会强制单行并撑宽容器 - Flex 容器里子项未设
flex-shrink: 0时，缩放行为可能意外触发横向滚动
touchmove 事件监听要不要加？
一般不用。纯 CSS 的 overflow-x: hidden 已覆盖绝大多数场景。只有当页面存在自定义手势（比如轮播图、拖拽排序）且这些逻辑未正确阻止冒泡时，才需要补 JavaScript 手段。
如果真要加，注意两点：
- 必须传
{ passive: false }，否则event.preventDefault()无效 - 不要无差别拦截所有
touchmove，否则会禁掉正常上下滚动 —— 应该只在水平位移明显时拦截：Math.abs(dx) > Math.abs(dy) - 小程序环境优先用
disableScroll: true（但会锁死所有滚动），或改用 WXML 容器 +overflow-x: hidden更可控
iOS 上的视觉残留问题怎么处理？
即使滚动被禁，iOS Safari 仍可能在边缘留下“弹性回弹”的视觉反馈（灰白蒙层），这是系统级行为，CSS 无法消除。用户手指划到边界时会看到轻微拉伸动画，但不会实际滚动。
目前没有可靠方式完全隐藏这个效果，只能接受它是 iOS 的设计特性。如果你的产品对交互一致性要求极高，得提前和产品/设计对齐：这不是 bug，是平台限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
