JS 阻止页面滚动

在升级到 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 来分析。

浏览器内核总结：https://www.cnblogs.com/jesse131/p/4888857.html

1. Chrome 默认的事件监听参数
   

• useCapture:false 表示事件采用冒泡机制（capture 译为 捕获），浏览器默认就是 false
• passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为（可以提高运行速度）。

2. Safari 默认的事件监听参数

   Safari Update：Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
   更新了根文档触摸事件侦听器，默认使用passive:true提高滚动性能并减少崩溃

所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。这将导致设置的 e.preventDefault() 代码失效。

所以 Safari 默认是不会阻止滚动的。

通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。