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是页面根容器的类名。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐