阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）

 

 

在升级到 ios11.3 系统后，发现以前阻止页面滚动的代码e.preventDefault代码失效了。因而本身折腾了一番，找到了解决办法，分享给你们。

1、前言

浏览器在移动端有一个默认触摸滚动的效果，让咱们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。

然而在开发的时候咱们常常须要阻止此效果。

在此先直接给一个方案，直接加上下面的代码便可：

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

若是不加passive:false,在 ios 上是不能起做用的。

2、解释

微信在 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 参数来兼容各个浏览器。便可实现阻止移动页面滚动的功能。

3、关于 passive 参数

关于 passive 在事件监听中的做用，推荐你们看这篇文章：passive 的事件监听器