如何用html设置弹框遮罩禁止页面滚动

最新推荐文章于 2024-07-25 08:14:42 发布

云南仟龙Mark

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量2.9k

点赞数

文章标签： css html html5

原文链接：https://blog.51cto.com/u_15111999/3701519

版权

本文关键讲解了如何用html设置弹框遮罩禁止页面滚动，原文中根据实例编码详细介绍的特别详尽，对我们的培训或是工作中具备一定的参照学习培训使用价值，必须的朋友下边伴随着笔者来一起学习学吧

前端工程师常常会碰到的一个难题便是制做一个弹框来向客户信息提示，在这个弹框弹出来的与此同时，通常会伴随一个灰色的遮罩层遮挡页面內容，与此同时全部页面被这层遮罩遮住，不能点一下也不能滚动。

如何用html设置弹框遮罩禁止页面滚动_前端

方案一：控制overflow禁止滚动（ios不兼容）

要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。
但是同样的问题在移动端情况就有所区别。仅仅设置html的上列属性，在移动端仍然无法禁止页面超出部分的滚动，我们需要设置下面的代码才能在弹框出现的时候禁止页面滚动：

1
2
3
4
html.style.overflow=“hidden”;
html.style.height=“100%”;
body.style.overflow=“hidden”;
body.style.height=“100%”;
原因是因为移动端是基于touch事件，要禁止基于touch事件的滚动，我们必须在对html禁止滚动的基础之上，再将需要禁止滚动的内容上再增加一个包裹层块级元素，然后将这个包裹层块级元素高度设置为100%并设置overflow:hidden;，那么在这里我们认为body包裹了整个页面，正是我们需要的块级元素，将他也设置为禁止滚动，就可以保证移动端页面的滑动时间不会触发页面滚动。
当用户关闭了弹框，页面也就恢复正常，我们设置如下CSS样式属性来还原整个页面的滚动效果：

1
2
3
4
html.style.overflow=“visible”;
html.style.height=“auto”;
body.style.overflow=“visible”;
body.style.height=“auto”;
这些样式正是对应CSS属性的默认样式。
然而这个方案有一个缺陷，就是ios系统下不兼容，黑幕的效果没法阻止页面的滚动。下面介绍移动端的另一种解决方案。

方案二：绝对/固定布局阻止手势滚动事件冒泡（PC端无效）

正是因为移动端的滚动基于屏幕的touch事件，因此诞生了方案二（手机淘宝就使用了这种方案）。
首先我们需要知道两个前提知识点：1、重叠的两个页面元素，z-index值更高的会优先触发事件监听，从而可以在此控制是否让事件流继续；2、移动端滚动的touch事件，基于事件流。
有了上面两个知识点的基础，我们就可以来理解这种方案的设计思路。方案二的原理是：不对原页面进行任何改动，仅仅只是用一个拥有更高z-index值的，布局为absolute或者fixed布局的黑幕（长宽100%）来挡住整个页面，并且监听黑幕的touchstart事件，在touchstart事件内结束事件流，从而阻挡事件流继续。这样，能够产生滚动效果的touch事件就传不到页面上，也就不会发生滚动。

如何用html设置弹框遮罩禁止页面滚动_前端_02

下面贴上方案二的完整测试源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main-content{
                position:relative;
                width:100%;
                background-color:#ccc;
                height:2000px;
            }
 
            .main-content .trigger{
                width:200px;
                height:100px;
                font-size:30px;
                color:#000;
            }
 
            .main-content .bottom{
                position:absolute;
                bottom:0;
                left:0;
                width:100%;
                height:200px;
                background-color:red;
            }
 
            .black-shield{
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:rgba(10,10,10,0.4);
                z-index:10;
            }
 
            .black-shield .info{
                font-size:40px;
                color:#000;
                border:1px solid;
                z-index:20;
            }
        </style>
    </head>
    <body>
        <div class="main-content">
            <button id="trigger" class="trigger">开/关</button>
            <div class="bottom"></div>
        </div>
        <div id="shield" class="black-shield" style="display:none;">
            <div id="info" class="info">当前黑幕弹出后，页面应该不可滑动，点击当前文本，关闭黑幕</div>
        </div>
           <http://www.qlyl1688.com/article_index.html> 
        <script>
            function test2(){
                var showShield=false;
                var shield=document.getElementById("shield");
                var trigger=document.getElementById("trigger");
                var info=document.getElementById("info");
                var body=document.querySelector("body");
                var html=document.querySelector("html");
 
                //点击显示黑幕
                trigger.addEventListener("click",function(){
                    shield.style.display="block";
                },false);
 
                //点击关闭黑幕
                info.addEventListener("touchstart",function(){
                    shield.style.display="none";
                },false);
 
                //在黑幕层阻挡touch事件
                shield.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    e.preventDefault();
                },false);
            }
 
            test2();
        </script>
    </body>
</html>

关于如何用html设置弹框遮罩禁止页面滚动的文章就介绍到这了，下次再见拜拜！

云南仟龙Mark

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何用html设置弹框遮罩禁止页面滚动

本文关键讲解了如何用html设置弹框遮罩禁止页面滚动，原文中根据实例编码详细介绍的特别详尽，对我们的培训或是工作中具备一定的参照学习培训使用价值，必须的朋友下边伴随着笔者来一起学习学吧前端工程师常常会碰到的一个难题便是制做一个弹框来向客户信息提示，在这个弹框弹出来的与此同时，通常会伴随一个灰色的遮罩层遮挡页面內容，与此同时全部页面被这层遮罩遮住，不能点一下也不能滚动。如何用html设置弹框遮罩禁止页面滚动_前端方案一：控制overflow禁止滚动（ios不兼容）要制作这个效果在PC端非常简单，只需要
复制链接

扫一扫