html5 移动端滚动穿透 几种方案

在移动端页面上，当有 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');