css滑动穿透问题

最新推荐文章于 2025-06-22 16:44:49 发布

ITzhongzi

最新推荐文章于 2025-06-22 16:44:49 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： css 滑动穿透

本文链接：https://blog.youkuaiyun.com/ITzhongzi/article/details/79816501

前端学习笔记专栏收录该内容

306 篇文章

订阅专栏

问题描述：

移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。

示例demo：

样式：

<style>
        .box{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .dialog{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.4);
        }
        .dia-con {
            width: 40vw;
            height: 38vw;
            background: white;
            margin: 30vh auto;
        }
    </style>

结构：

<body>
    <div class="box">
        <!-- 这里有非常多的文字 -->
        1测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        2测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        4测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        5测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        6测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        7测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        8测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
        测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>
    <div class="dialog">
            <div class="dia-con">
                <h4>内容</h4>
                <button>我知道了</button>
            </div>
        </div>
</body>

在手机页面运行上面代码如图所示：在灰色的遮罩上滑动的时候下面的 “测试文字” 也会跟着滑动。

解决方案一：

阻止顶层遮罩的默认行为。阻止冒泡。

示例demo：

<style type="text/css">
        .modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}
        .modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}
        .sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}
        .modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    </style>

<body>
        <!--一个未知宽高的弹出框，水平垂直居中-->
        <div class="sliders"></div>
        <div class="modals">
            <div class="modals-body">
                用户信息丢失，请先登录
            </div>
            <button class="btns">确定</button>
        </div>
        <!--end-->
        <div class="list"></div>
    </body>
    <script src="./jquery.js"></script>
    <script>

        for(var i = 0;i<=30;i++){
            $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
        }

        //阻止防止滚动、缩放。
        $(".sliders,.modals").on("touchmove",function(event){
            event.preventDefault();
        }); 

        $(".btns").on("click",function(){
            $(".sliders,.modals").remove();
        });

    </script>

运行效果：

解决方案二：

首先设置 body 的overflow ： hidden; 这样超出部分就不会滑动。当遮罩消失时，在设置body的 overflow： initial；或者设置为 scroll即可

示例demo：

<style type="text/css">

        body{overflow:hidden;}

        .modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}
        .modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}
        .sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}
        .modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    </style>

<body>
        <!--一个未知宽高的弹出框，水平垂直居中-->
        <div class="sliders"></div>
        <div class="modals">
            <div class="modals-body">
                用户信息丢失，请先登录
            </div>
            <button class="btns">确定</button>
        </div>
        <!--end-->
        <div class="list"></div>
    </body>
    <script src="./jquery.js"></script>
    <script>
        //解决方案一：

        // for(var i = 0;i<=30;i++){
        //     $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
        // }

        // //阻止防止滚动、缩放。
        // $(".sliders,.modals").on("touchmove",function(event){
        //     event.preventDefault();
        // }); 

        // $(".btns").on("click",function(){
        //     $(".sliders,.modals").remove();
        // });
            
        // 解决方案 二：
        for(var i = 0;i<=30;i++){
            $(".list").append("<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>");
        }

        $(".btns").on("click",function(){
            $(".sliders,.modals").remove();

            //关键代码
            $("body").css("overflow-y","initial");

        });
    </script>

总结：

最简单的解决方案：

body{
            overflow: hidden;
        }

在body上增加这个样式即可禁止滑动。