摘要：第一種情況比較簡單，彈框和頁面都不可滾動第二種情況是彈框可滾動，頁面不可滾動移動端兼容性不好，可應用于端適用于移動端記錄開始滑動的坐標，用于判斷滑動方向未開始，已開始，滑動中核心部分判定一次就夠

第一種情況比較簡單，彈框和頁面都不可滾動

    

        
this is a box
        
this is a box
        
this is a box
        
    

 .mask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,.7);
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding: 10px;
    background: #fff;
    text-align: center;
}

var oBtn = document.getElementById("btn"),
    oMask = document.getElementById("mask"),
    oBox = document.getElementById("box"),
    oClose = document.getElementById("close");

oBtn.onclick = () => {
    oMask.style.display = "block";
}
oClose.onclick = () => {
    oMask.style.display = "none";
}
oMask.addEventListener("touchmove", (e) => {
    e.preventDefault();
});

第二種情況是彈框可滾動，頁面不可滾動

1.移動端兼容性不好，可應用于pc端

 

 

    

        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
    

.mask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,.7);
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 200px;
    height: 200px;
    padding: 10px;
    overflow-y: scroll;
    -webkit-overflow-scrolling : touch;
    background: #fff;
    text-align: center;
}

var oBtn = document.getElementById("btn"),
    oMask = document.getElementById("mask"),
    oBox = document.getElementById("box"),
    oClose = document.getElementById("close");
oBtn.onclick = () => {
    oMask.style.display = "block";
    document.body.style.height = "100%";
    document.body.style.overflow = "hidden";
    document.documentElement.style.overflow="hidden"
}
oClose.onclick = () => {
    oMask.style.display = "none";
    document.body.style.height = "auto";
    document.body.style.overflow = "scroll";
    document.documentElement.style.overflow="scroll"
}

2.適用于移動端

    

    

        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
this is a box
        
    

.maskWrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .7);
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling : touch;
    padding: 10px;
    background: #fff;
    text-align: center;
}

var oBtn = document.getElementById("btn"),
    oMaskWrap = document.getElementById("maskWrap"),
    oMask = document.getElementById("mask"),
    oBox = document.getElementById("box"),
    oClose = document.getElementById("close");
oBtn.onclick = () => {
    oMaskWrap.style.display = "block";
}
oClose.onclick = () => {
    oMaskWrap.style.display = "none";
}
oMask.addEventListener("touchstart", (e) => {
    e.preventDefault();
});

let startY = 0; // 記錄開始滑動的坐標，用于判斷滑動方向
let status = 0; // 0：未開始，1：已開始，2：滑動中
// 核心部分
oBox.addEventListener("touchstart", e => {
    status = 1;
    startY = e.targetTouches[0].pageY;
}, false);

oBox.addEventListener("touchmove", e => {
    // 判定一次就夠了
    if (status !== 1) return;

    status = 2;

    let t = e.target || e.srcElement;
    let py = e.targetTouches[0].pageY;
    let ch = t.clientHeight; // 內容可視高度
    let sh = t.scrollHeight; // 內容滾動高度
    let st = t.scrollTop; // 當前滾動高度

    // 已經到頭部盡頭了還要向上滑動，阻止它
    if (st === 0 &&  py > startY) {
        // console.log(st + "/" + py + "/" + startY);
        e.preventDefault();
    }

    // 已經到低部盡頭了還要向下滑動，阻止它
    if ((st === sh - ch) &&  py < startY) {
        // console.log(st + "/" + (sh - ch) + "/" + py + "/" + startY);
        e.preventDefault();
    }
}, false);

oBox.addEventListener("touchend", e => {
    status = 0;
}, false);

3.適用于移動端和pc端

var oBtn = document.getElementById("btn"),
    oMaskWrap = document.getElementById("maskWrap"),
    oMask = document.getElementById("mask"),
    oBox = document.getElementById("box"),
    oClose = document.getElementById("close");
    
var isFixed = 0;
oBtn.onclick = () => {
    oMaskWrap.style.display = "block";
    isFixed = 1;
}
oClose.onclick = () => {
    oMaskWrap.style.display = "none";
    isFixed = 0;
}

var bodyEl = document.body;
var top = 0;

function stopBodyScroll (isFixed) {
    console.log(isFixed)
    if (isFixed) {
        top = window.scrollY;

        bodyEl.style.position = "fixed";
        bodyEl.style.top = -top + "px";
    } else {
        bodyEl.style.position = "";
        bodyEl.style.top = "";

        window.scrollTo(0, top); // 回到原先的top
    }
}
// window.onscroll = stopBodyScroll(isFixed);
document.addEventListener("onscroll", function (e) {
    stopBodyScroll(isFixed);
})