移动端页面滚动穿透问题解决方案

问题描述

最近在做移动项目时遇到一个页面滚动穿透问题,具体场景是这样的,在一个可滚动的列表页中打开弹窗,底部的页面理论上是不可滚动的,但是当滑动弹窗时,底部页面会跟随滚动,这就是所谓的页面滚动穿透的问题。这个是比较常见的问题,基本都会遇到,Google一下出解决方案也是挺多的。以下根据不同的适用场景总结一些解决方案:

方案一:overflow:hidden

在列表容器的父元素上设置样式overflow:hidden来禁用滚动

    .alpha {
     height: 100%;
     overflow: hidden;
    }
    .alpha body {
     height: 100%;
     overflow: hidden;
    }

当弹出蒙层的时候,可以添加底部页面HTML标签的class,取消蒙层时则删除class

    $('html').addClass('alpha');
    $('html').removeClass('alpha');

缺点:

当弹出蒙层时,禁用了html和body的滚动条,滚动列表的滚动位置会丢失,会重置到没有滚动的状态,需要js进行还原。

手机扫码查看效果:
查看DEMO

1、未滚动时弹出蒙层,底部列表会被禁用滚动
2、滚动后再弹出蒙层,滚动位置会丢失,重置到无滚动的位置

方案二:阻止touchmove默认事件

通过阻止弹窗的touchmove默认事件禁用滚动实现
代码实现:

    var modal = document.getElementById('modal'); // 弹窗dom对象
    modal.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);

缺点

弹窗中里不能有其它需要滚动的内容,如大段文字需要固定高度,显示滚动条也会被阻止。

手机扫码查看效果:
查看DEMO

方案三:position: fixed

设置列表容器元素为positon:fixed
代码实现:

    .alpha.body{
        position:fixed;
        width:100%;
    } 

缺点:

这种方法同样有以上两种方法的缺点,滚动列表的滚动位置会丢失,会重置到没有滚动的状态,通过js获取滚动条位置,调整位置即可。

打开弹窗时则在body元素上添加class
手机扫码查看效果:
查看DEMO

更多阅读

posted @ 2016-08-25 22:31 -Aaron- 阅读(...) 评论(...) 编辑 收藏