移动端滚动穿透的问题解决

在移动端页面上，当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题

解决方法一：

css之overflow:hidden

html, body {
    overflow: auto;
    height: 100%;
}

使用这种方法时，在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突，导致在无限滚动请求下一页数据的时候请求不成功，但是如果你的页面上没有分页的，这样还是可以很好的解决滚动穿透问题

解决方法二：

touchmove + preventDefault 

在弹出的提示框中阻止浏览器的默认行为以及冒泡行为，在可以滑动的dom元素中取消浏览器的默认行为以及冒泡行为

let stop = document.querySelector("#cancel");
stop.addEventListener("touchmove", (event) => {
    event.preventDefault();  //阻止默认行为     			
    event.stopPropagation(); //阻止冒泡
}, false)
let cancelStop = document.querySelector(".allReason");
cancelStop.addEventListener("touchmove", (event) => {
    event.returnValue = true;	//取消阻止默认行为                            
    event.cancelBubble = true;  //取消阻止冒泡                        
}, false)

使用这种方法会有一个缺点，那就是滑动其它地方，底部页面不会滚动，但是在可以滑动的页面中，将其滑动到底部或者顶部后继续滑动，底部页面任然可以滚动

解决方法三：

css之position: fixed  +  js 滚动条的位置

在弹出遮罩层的时候给body添加样式以及获取滚动条的位置，在关闭遮罩层的时候移除body的样式以及设置滚动条的位置

css

.scroll {
    position: fixed;
    width: 100%;
}

js 在需要的地方进行调用 scroll.afterOpen();  和  scroll.beforeClose();

var scroll = (function (className) {
    var scrollTop;
    return {
        afterOpen: function () {
            scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;
            document.body.classList.add(className);
            document.body.style.top = -scrollTop + 'px';
        },
        beforeClose: function () {
            document.body.classList.remove(className);
            document.scrollingElement.scrollTop = scrollTop;
            document.body.scrollTop = scrollTop;
        }
    };
})('scroll');

这种方式也可以很好的解决滚动穿透问题