遮罩层 弹框 页面滚动

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

<input type="button" value="click me" id="btn">

<div class="mask" id="mask">
    <div class="box">
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <input type="button" value="close" id="close">
    </div>
</div>

 .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端

<input type="button" value="click me" id="btn"> 

 <div class="mask" id="mask">
    <div class="box">
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <input type="button" value="close" id="close">
    </div>
</div>

.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.适用于移动端

<input type="button" value="click me" id="btn">

<div class="maskWrap" id="maskWrap">
    <div class="mask" id="mask"></div>
    <div class="box" id="box">
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <h1>this is a box</h1>
        <input type="button" value="close" id="close">
    </div>
</div>

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