最近在做一个移动端项目的时候， 发觉用 Swiper 做横向滑块的时候，往往会引起页面整体也跟着往下滑。这就造成用户体验不佳，看着有点乱。本文想跟较大家说说我摸索出来的一些办法，虽然不是最专业的，但应当能帮到你们。

一、问题到底是哪些？

礼貌吗？ 当你把 Swiper 放在页面里 用手指左右滑的时候，本来只想切换图片，但是手机往下也会跟着滑一下然后页面被拉到别的位置，这叫“水平滑动触发垂直滚动”。有时候甚至会把下面的内容给掀走。

这种情况较大更多出当前：

• iOS Safari
• 微信较小程序里的 WebView
• 一部分 Android 浏览器

原因一般是浏览器对手势事件的默认行为处理不一样， 要么觉得你是在做纵向滚动， 吃瓜。 要么觉得你是在做横向翻页，但又没做良好隔离。

二、先别急，用 CSS 把它关起来吧！

这条规则告诉浏览器：如果是左右手势，就不要让它去做任意默认动作。但要注意：这条 CSS 在部分陈旧版浏览器里不生效，所以还是要配合 JS 一起用，太扎心了。。

三、JS 层面怎么阻止？—— preventDefault 的采用技巧

* **`preventDefault` 的采用：** 需要谨慎采用， 这是因为它会阻止元素的默认行为，有可能会作用于其他功能的正常采用。Swiper事件结合状态控制：* **Swiper事件结合状态控制：" 呀呀呀啊……其实我还记住以前玩游戏时按住屏幕左右滑，就有点类似当前这个效果。 所以我就想， 把 preventDefault 放进 onTouchMove 那里然后再判断方向是不是水平方向。

哎呀，我也遗忘写了不过不管怎样，希望对你们有协助！祝编码愉迅速～ 谢谢阅读！

行吧... * 最后再来看测试一下看是不是还会出现 “上下拉冲突” 的现象。 * 要记住把 meta viewport 写对，否则页面缩放太较大也会作用于手势识别。 * 如果还有问题， 能够考虑直接换成 ScrollView 或者自定义实现； * 确认代码没写死平台依赖，举个例子 `navigator.userAgent.includes` 等等。

不过如果你要兼容老设备，还得持续加上 JS 阻止。 六、一下我们学到的较小技巧 * **先加 CSS**：touch-action: pan-y；让浏览器了解不要横向拖拽引起页面移位。 * **然后 JS**：监听 touchmove， 走捷径。 用 preventDefault 判断方向； * 如果实在卡住能够给 outer 包裹个 overflow:hidden； * iOS 崭新系统基本 OK，但老版本还是要保留方案。

客观地说... // 示例代码 ... .outer{ overflow:hidden;} 五、为哪些 iOS 16.x 已恢复？ 据官方文档说明， 从 iOS 16 启动 Safari 对 touch-action 的支持更完整了也恢复了 “swipe 阻止” 的 bug。所以如果你当前用的是最崭新系统，那基本不用担心。

如果是 就 cancel；否则就 let m do normal scroll. // 简洁写法 document.querySelector.addEventListener{ // 判断水平方向 var diffX = Math.abs; var diffY = Math.abs; if{ // 水平 e.preventDefault; } }); 四、还有更较高级的办法—— Swiper 自带 API 控制 启动的时候要设置 移动端配置 meta name= viewport content= width=device-width … 在更多列切换场景下 Swiper 能够来控制导航条体现数量， 我傻了。 让页面不拥挤 … … 嗯，还能够尝试把 swiper 的 direction 属性改成 vertical，然后再用一个外层 div 来包裹整个组件，这样能够把全部东西都约束在外层 div 内部，不让浏览器去翻页。