摘要：第一种情况比较简单，弹框和页面都不可滚动第二种情况是弹框可滚动，页面不可滚动移动端兼容性不好，可应用于端适用于移动端记录开始滑动的坐标，用于判断滑动方向未开始，已开始，滑动中核心部分判定一次就够

第一种情况比较简单，弹框和页面都不可滚动

    

        
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);
})