阻止苹果xs max浏览器页面整体滚动

在苹果XS Max手机上,一个列表页面在滑动时会导致整个页面跟随滚动,这种现象称为橡皮筋效果。实际上是body在touchmove事件中滚动以及页面组件的滚动造成的冒泡问题。为了解决这个问题,可以通过阻止body的滚动来实现,具体做法是在事件监听器中阻止默认事件。同时,了解到监听器的执行会消耗时间,使用passive选项可以提升滑动的流畅性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天发现一个神奇的现象,在苹果xs max型号手机上滑动一个列表页面,整个页面(包括顶部fix的头组件)都在滑动,网上称之为橡皮筋效果。

页面的滚动看起来比较乱,其实知道原理可以分析出:
外层的滚动(上下会出白色无内容空间)是由于body在touchmove时发生了滚动,
内层的滚动(如列表内容在页面空间内滑动)是由于页面组件在touchmove时发生了滚动。

其实际上是个冒泡问题,解决办法是阻止body的滚动,直接上代码:

document.body.addEventListener("touchmove", function(e){
	e.preventDefault();  // 看网上文章说这一行可以不写
},{
	passive: false
})

DOM 规范做了修订,addEventListener原有的第三个参数useCapture可以传一个对象

{
    capture: false,
    passive: false,
    once: false
}

passive的原意是顺从,即执行浏览器的默认事件(本文中就是touchmove时页面默认滚动),passive: false即阻止浏览器默认事件。

意外收获:
在解决问题的过程中学习到,监听器的执行是耗时的(哪怕是空的监听器),这也是passive的作用,浏览器不需要在执行完监听器后执行默认事件,滑动等效果会更加顺畅。

参考:
https://www.cnblogs.com/ziyunfei/p/5545439.html
http://www.mamicode.com/info-detail-2306048.html

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值