在升级到 ios11.3 系统后，发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法，分享给大家。
浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。
然而在开发的时候我们经常需要阻止此效果。
在此先直接给一个方案，直接加上下面的代码即可：
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
如果不加
passive:false
,在 ios 上是不能起作用的。
微信在 Android 端和 IOS 端使用的不是同样的浏览器内核：
Android 版 微信浏览器 ：QQ浏览器 X5内核（相当于使用的 Chrome）
IOS 版 微信浏览器 ：WKWebView（相当于使用的Safari）
所以下面分别使用 Chrome 和 Safari 来分析。
关于浏览器内核问题，有兴趣的可以看看这个：
浏览器内核总结
1. Chrome 默认的事件监听参数：
useCapture:false
表示事件采用冒泡机制（capture 译为 捕获），浏览器默认就是false；
passive:false
表示我现在主动告诉浏览器该监听器将使用
e.preventDefault()
来阻止浏览器默认的滚动行为（可以提高运行速度）。
2. Safari 默认的事件监听参数：
在 Safari 中，有一个
更新
：
Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
更新了根文档触摸事件侦听器，默认使用
passive:true
提高滚动性能并减少崩溃
所以Safari 中默认使用了
passive:true
，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。这将导致设置的
e.preventDefault()
代码失效。
所以 Safari 默认是不会阻止滚动的。
3. 结论
我们通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。
三、关于 passive 参数
关于 passive 在事件监听中的作用，推荐大家看这篇文章：
passive 的事件监听器
浙ICP备 15005796号-2
浙公网安备 33010602002000号
CDN 存储服务由
又拍云
赞助提供
