遮罩层弹框页面滚动

2020-04-24 18:05:25 阅读：215 来源： 互联网

标签：box 遮罩 style top 50% 弹框 getElementById document 页面

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

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

标签：box,遮罩,style,top,50%,弹框,getElementById,document,页面
来源： https://www.cnblogs.com/baimeishaoxia/p/12769110.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

遮罩层 弹框 页面滚动

遮罩层弹框页面滚动