移动端滚动穿透

现象

　　移动端当有fixed遮罩背景和弹出层时，在屏幕上滑动能够滚动蒙层下面的内容。

解决方案

　1.设置overflow为hidden　

.stop-touch {
    &,body {
        overflow hidden;
        height: 100%;
    }
}

　　当弹出层弹出时在html上添加一个.stop-touch,禁用html和body的滚动条

　　缺陷: html和body滚动被禁用，弹出层后页面的滚动位置全部丢失，需要js来计算原来滚动的位置，在弹出时保持滚动位置；

　　　　　页面的背景还是能有滚的动的效果

　2.阻止默认事件

　　监听弹出层的touchmove事件

modal.addEventListener('tuochmove', function (e) {
    e.preventDefault();
}, false);

　　缺陷: 弹出层的滚动也会被禁止掉。

　　3.position:fixed;

body.stop-touch {
    position: fixed;
    width: 100%;
}

　　当弹出层弹出时滚动条丢失，这时候记录滚动条的位置，关闭的时候将滚动位置还原

var Modal = (function (option) {　　
    var scrollTop;　　
    return {　　　　　
        afterOpen: function () {　　　　　　
            scrollTop = document.scrollingElement.scrollTop;　　　　　
            document.body.classList.add(option);　　　　　　
            document.body.style.top = -scrollTop + 'px';　　　　
        },
        beforeClose: function () {　　　　　　
            document.body.classList.remove(option);
            document.scrollingElement.scrollTop = scrollTop;　　　　　　
        }
    }
})('stop-touch')