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

最新推荐文章于 2024-03-14 10:23:09 发布

原创最新推荐文章于 2024-03-14 10:23:09 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #页面滚动 #冒泡 #双重滚动

实际开发问题同时被 2 个专栏收录

20 篇文章

订阅专栏

17 篇文章

订阅专栏

在苹果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