移动端开发——移动端遮罩层滚动防穿透body解决方案

    经常做移动端网页开发的朋友们，都应该会遇到，弹起遮罩层的交互需求，比如小点的toast提示框，modal对话框，也有满屏的提示框，或者可操作交互的弹框；

有些需求是要求在弹框上可操作，可滚动；在滚动时，就会遇到比较奇怪的兼容bug了，当你在滑动遮罩层时，下面的body页面也会跟着滚动，页面发生了“穿透”，即便你对弹出的元素设置最高级别的z-index，没什么用；

对这个坑也是研究了一端是时间，才搞定，下面给他家分享一个实测非常有用的解决方案：

大致思路，就是弹框出现时，给body设置禁止滚动（overflow:hidden）；弹框消失时，再回复该属性；直接贴代码（主要就是CSS+JS），使用方式很简单（代码可直接复制使用），

1、先命名一个css样式属性：

body.modal-open {
     position: fixed;
     width: 100%;
 }

2、js创建一个命名空间，用来动态给body绑定第一步设定的属性；

var ModalHelper = (function (bodyCls) {
        var scrollTop;
        return {
            afterOpen: function () {//弹框弹出时
                scrollTop = document.scrollingElement.scrollTop;
                document.body.classList.add(bodyCls);
                document.body.style.top = -scrollTop + 'px';
            },
            beforeClose: function () {//弹框消失时
                document.body.classList.remove(bodyCls);
                document.scrollingElement.scrollTop = scrollTop;
            }
        };
    })('modal-open');

3、直接调用

mask.show();//弹框出现时
ModalHelper.afterOpen();


mask.hide();//弹框隐藏时
ModalHelper.beforeClose();

注：可同时搭配touchumove事件使用，给弹框背景层nask设置touchmove时，阻止默认事件@touchmove.prevent;

 

转载于:https://www.cnblogs.com/web-wjg/p/11319513.html