蒙层禁止页面滚动

ps酷教程

已于 2023-04-22 10:20:41 修改

阅读量618

点赞数

分类专栏：前端学习文章标签： css html javascript

于 2023-04-22 10:20:11 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/130301333

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

学习链接：蒙层禁止页面滚动的方案

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蒙层禁止页面滚动的方案</title>
    <style type="text/css">
        
        #mask{
            position: fixed;
            height: 100vh;
            width: 100vw;
            background: rgba(0, 0, 0, 0.6);
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hide{
            display: none !important;
        }
        .long-content > div{
            height: 300px;
        }
        .mask-content{
            width: 300px;
            height: 100px;
            overflow-x: auto;
            background: #fff;
        }
        .mask-content > div{
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="long-content">
        <div>long content</div>
        <div>long content</div>
        <div>long content</div>
        <button id="btn">弹窗</button>
        <div>long content</div>
        <div>long content</div>
        <div>long content</div>
        <div>long content</div>
    </div>
    <div id="mask" class="hide">
        <div class="mask-content">
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
            <div>mask-content</div>
        </div>
    </div>
</body>
    <script type="text/javascript">
        (() => {
            const btn = document.getElementById("btn");
            const mask = document.getElementById("mask");
            const maskContent = document.querySelector(".mask-content");
            const body = document.body;

            let documentTop = 0; // 记录按下按钮时的 `top`

            /* 按钮点击时: 1. 给mask添加display:none; 
                          2. 记录此时页面被卷去的高度(记录滚动位置)
                          3. 给body加上fixed固定定位（此时，如果不做任何处理，页面会立即滚动到top:0的位置）; 
                          4. 将页面滚动到之前记录的位置（恢复弹窗前的位置）
            
            */
            btn.addEventListener("click", e => {
                mask.classList.remove("hide");
                documentTop = document.scrollingElement.scrollTop;
                body.style.position = "fixed"
                body.style.top = -documentTop + "px";
            })

            /* 点击蒙层时: 1. 给mask添加hide样式类, 让mask的display为none
                          2. 恢复body的默认定位（此时，如果不做任何处理，页面又会立即滚动到top:0的位置）
                          3. 将页面滚动到之前记录的位置（恢复弹窗前的位置）
            */
            mask.addEventListener("click", e => {
                mask.classList.add("hide");
                body.style.position = "static";
                body.style.top = "auto";
                document.scrollingElement.scrollTop = documentTop;
            })

            
            /* 阻止事件冒泡, 防止点击弹框中的内容时, 也把弹框关闭了 */
            maskContent.addEventListener('click',(e) => {
                e.stopPropagation();
            })

        })();
    </script>
</html>

ps酷教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蒙层禁止页面滚动

3. 给body加上fixed固定定位（此时，如果不做任何处理，页面会立即滚动到top:0的位置）;2. 恢复body的默认定位（此时，如果不做任何处理，页面又会立即滚动到top:0的位置）4. 将页面滚动到之前记录的位置（恢复弹窗前的位置）3. 将页面滚动到之前记录的位置（恢复弹窗前的位置）/* 点击蒙层时: 1. 给mask添加hide样式类, 让mask的display为none。/* 阻止事件冒泡, 防止点击弹框中的内容时, 也把弹框关闭了 */// 记录按下按钮时的 `top`
复制链接

扫一扫

专栏目录