1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html5禁用浏览器下拉 禁止ios浏览器页面上下滚动 (橡皮筋效果)

html5禁用浏览器下拉 禁止ios浏览器页面上下滚动 (橡皮筋效果)

时间:2020-02-22 21:45:37

相关推荐

html5禁用浏览器下拉 禁止ios浏览器页面上下滚动 (橡皮筋效果)

发现之前阻止页面滚动的代码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 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

参考:

/q36835109/article/details/72179403

/qq_40717869/article/details/81749970

/ziyunfei/p/5545439.html

/zsc030403015/article/details/52885747

/weixin_39927850/article/details/79353228

/jasonwang2y60/p/6848464.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。