ios系统禁止页面默认的上拉回弹效果

最新推荐文章于 2024-07-18 17:19:39 发布

汉三姓胡

最新推荐文章于 2024-07-18 17:19:39 发布

阅读量3.2k

点赞数

分类专栏： h5 小技巧文章标签： ios h5

本文链接：https://blog.csdn.net/hnnd123/article/details/120223592

版权

小技巧同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

这篇博客主要介绍了如何在iOS浏览器中消除页面滚动到底部或顶部时的默认回弹效果。通过监听touchmove事件，判断滚动发生在页面还是浮层，并使用event.preventDefault()阻止页面的默认回弹。解决方案涉及DOM元素选择、事件监听和浏览器兼容性处理。

摘要由CSDN通过智能技术生成

ios浏览器中页面滑到顶部或者底部继续往下/往上拖动时，页面底部背景会出现白色，产品要求去掉默认的回弹效果。
页面结构如下：
在这里插入图片描述
整个页面只有一屏，但是页面中弹出的浮层可以滚动。

最终解决方法如下：

if (isIOS) {
      document.addEventListener('touchmove', function(event) {
        const path = event.path || (event.composedPath && event.composedPath())
        if (!mainContentEle) {
          mainContentEle = document.querySelector('.main-content')
        }
        if (path && Array.isArray(path) && path.includes(mainContentEle)) {
          event.preventDefault();
        }
      }, { passive: false });
    }

要点：
利用event.path判断当前滑动的区域是在页面还是浮层中，如果是页面滚动事件，则利用event.preventDefault()阻止掉事件，如果不是则正常滚动。

注：even.path会有兼容性问题，可以参考：event.path兼容性问题
.main-content是页面根容器的类名。