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

cangck_X 发布于2019-08-22 15:59 / 706人阅读

摘要：一前言浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。二解释微信在端和端使用的不是同样的浏览器内核版微信浏览器浏览器内核相当于使用的版微信浏览器相当于使用的所以下面分别使用和来分析。

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

GPU云服务器云服务器 IOS滑动抽屉效果滑动效果 php下拉加载效果 html下拉刷新效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93931.html

微信里面防止下拉"露底"组件

摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。前言在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0
vue结合preventDefault()和页面滚动高度计算，解决ios橡皮筋效果

摘要：第一种方法我尝试了，觉得不是很好用，而且页面的滑动变得卡顿，橡皮筋效果还是时而出现，因此考虑第二种办法。由上面的定义可知，当页面滑动到顶部时，为，当页面出现橡皮筋时，小于当页面滑动到底部时，。感谢的启发，方法很有用！好几个月以前，我写了一个类似于自动回复那种的客服页面，嵌入到公司开发的app里。上周测试突然找到我，说页面在滑动的时候，输入框也会跟着上下滑动，而这个...

JerryWangSAP 2019-08-23 14:09 评论0 收藏0
手机端页面在项目中遇到的一些问题及解决办法（持续更新）

摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...

teren 2019-08-29 15:36 评论0 收藏0
手机端页面在项目中遇到的一些问题及解决办法（持续更新）

摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...

wyk1184 2019-08-26 11:59 评论0 收藏0