在移動端頁面上，當有 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');
 

這種方式也可以很好的解決滾動穿透問題