在升级到 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 的事件监听器

转载于:https://www.cnblogs.com/colorsed/p/9591084.html

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

html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章本文实例为 ...
html 禁止页面回弹,JavaScript禁止微信浏览器下拉回弹效果
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1: var overscroll = function(el){ el.addEventListe ...
android 微信回弹,完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
js阻止移动端下拉滑动效果
document.body.addEventListener('touchmove', function (e) {e.preventDefault(); // 阻止默认的处理方式即下拉滑动效果 ...
微信浏览器下拉黑边的终极解决方案---wScroollFix
开始由于在开发微信页面的时候下拉黑边的情况很常见,有时候会比较影响体验,因此开发了wScrollFix库,用于隐藏微信下拉的黑边问题 npm地址 github地址什么是黑边相信很多在微信上面做网 ...
html游戏禁止微信浏览器下拉,JavaScript中防止微信浏览器被整体拖动的方法
在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题 ...
html游戏禁止微信浏览器下拉,如何用电脑模拟微信浏览器浏览禁止PC打开的微网站...
1.可以电脑安装一个安卓模拟器再查看: 2.增加浏览器的User-agent,在此,本人就拿火狐浏览器为例,具体修改方法如下: 方法一: FireFox修改User-agent 在地址栏输入" ...
html5 css橡皮筋效果,阻止移动端浏览器下拉橡皮筋效果（下拉滚动露底）
前言最近项目有个需求:需要移动端浏览器下的橡皮筋效果,但是页面内部的存在div框需要存在滚动.由此,遇到的问题与解决过程,记录如下. 声明:此处只讨论js控制部分,css的设置(例:overflow ...
禁止微信浏览器的下拉滑动
禁止微信浏览器的下拉滑动解决思路: 1 先禁止body的滚动事件 2 再给需要scroll的元素加上自定义的滚动事件注:加入此代码后要给需要scroll的元素加上.scroll的class var ...

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