移動端開發——移動端遮罩層滾動防穿透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;