发现之前阻止页面滚动的代码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
/article/81168.htm javascript移动开发中touch触摸事件详解
禁止iOS的弹性滚动 微信的下拉回弹
一种方法:
html头部添加
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
然后将页面body的高度设为window的高度
$("body").height( $(window).height() );
其他方法
页面高度超过设备可见高度时,阻止掉touchmove事件。
document.body.addEventListener('touchmove', function (event) {event.preventDefault();}, false);
/*** 禁止浏览器下拉回弹*/function stopDrop() {var lastY;//最后一次y坐标点$(document.body).on('touchstart', function(event) {lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。});$(document.body).on('touchmove', function(event) {var y = event.originalEvent.changedTouches[0].clientY;var st = $(this).scrollTop(); //滚动条高度console.log("st = "+st);if (y >= lastY && st <= 0) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。lastY = y;event.preventDefault();}lastY = y;//方法三// var abc=$(document.body).scrollTop();// console.log("abc = "+abc);// if (abc>0) {// $(document.body).scrollTop(0);// }});}stopDrop();
/q/1010000000322091
如果觉得《禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹》对你有帮助,请点赞、收藏,并留下你的观点哦!