CSS如何让移动端页面禁止左右滑动？设置overflow-x: hidden的正确姿势
直接加 overflow-x: hidden 就够了吗？
答案可能让你有点意外：不够。如果你只把 overflow-x: hidden 写在 body 标签上，在 iOS 设备上，这个设置大概率会“失灵”。为什么？问题出在 Safari 浏览器独特的滚动机制上——它会将滚动上下文“透传”给更上层的 html 元素。所以，只锁住 body 是没用的，左右滑动依然会畅通无阻。
那正确的做法是什么？记住这个黄金组合：
html, body { overflow-x: hidden; overflow-y: auto; }—— 这是兼容性最好、最基础的写法。- 千万别漏掉
html选择器。在 iOS Safari 的世界里，滚动的根节点是html，而不是我们通常理解的body。 - 顺手加上
overflow-y: auto（或者scroll）是个好习惯，这能明确保留垂直滚动的能力，避免“误伤友军”。 - 如果你的页面里有固定定位的弹窗或遮罩层，记得给它们单独设置
overflow-x: visible，否则它们的内容可能会被父级的隐藏设置给裁剪掉。
为什么有时候加了还是能左右滑？
代码明明写对了，页面却依然能横向拖动？别急，这通常是内容溢出的“锅”。overflow-x: hidden 的本质是隐藏超出容器的部分，但如果子元素的实际宽度本身就超过了视口边界，滚动条虽然被隐藏了，但溢出内容形成的“可滚动区域”依然存在。
常见的坑有哪些？比如，一个元素设置了 width: 100vw，但同时它又有 padding 或 border，导致它的实际宽度（content + padding + border）超过了 100vw。又或者，你用了 transform: translateX() 把元素“推”出了屏幕，或者 Flex 布局中的子项意外地把容器给撑宽了。
遇到这种情况，该怎么排查和修复？
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器的开发者工具，仔细检查是否有元素的 计算后宽度（computed width） 大于
100vw。 - 给那些可能溢出的容器加上
box-sizing: border-box，让它的宽度计算包含内边距和边框。 - 谨慎使用
white-space: nowrap配合长文本，这个组合会强制文本不换行，很容易就把容器撑爆。 - 在 Flex 布局中，如果子项没有设置
flex-shrink: 0（禁止收索），浏览器在缩放时的一些自适应行为，也可能意外触发横向滚动。
touchmove 事件监听要不要加？
一个常见的疑问是：光靠 CSS 够吗？需不需要用 Ja vaScript 监听 touchmove 事件来“双保险”？
其实，在绝大多数常规场景下，纯 CSS 方案已经足够了。只有当页面里存在一些自定义的手势交互（比如自己实现的轮播图、拖拽排序组件），并且这些组件的逻辑没有正确阻止事件冒泡时，才需要考虑补充 Ja vaScript 手段来拦截。
如果你确实需要加上 JS 监听，务必注意这两点：
- 事件监听器必须传入
{ passive: false }这个选项。否则，在事件处理函数里调用event.preventDefault()来阻止滚动是无效的。 - 不要简单粗暴地拦截所有
touchmove事件，否则会把正常的上下滚动也一并禁掉。正确的做法是判断滑动方向：只在水平位移（dx）明显大于垂直位移（dy）时，才进行拦截，即Math.abs(dx) > Math.abs(dy)。 - 在小程序这类特殊环境中，虽然有
disableScroll: true这样的配置项，但它会锁死所有滚动。更可控的方案通常是使用 WXML 容器，并为其加上 CSS 的overflow-x: hidden。
iOS 上的视觉残留问题怎么处理？
最后，我们来聊聊一个让人有点无奈的“特性”。即便你用上面的方法成功禁用了左右滚动，在 iOS 的 Safari 上，当用户的手指滑动到页面边缘时，可能还是会看到一个轻微的“弹性回弹”视觉反馈（屏幕边缘会出现灰白蒙层或拉伸动画）。
需要明确的是，这只是系统级别的视觉提示，并不会真的让页面内容滚动。目前，没有可靠且优雅的 CSS 方法能完全消除这个效果，它是 iOS 系统交互设计的一部分。
所以，如果你的产品对交互一致性有着极高的要求，最好的做法是在项目初期就和产品经理、设计师沟通清楚：这不是代码的 bug，而是平台的固有特性。提前达成认知上的一致，能省去后续很多不必要的解释和调试时间。
