（PC/移动端）遮罩弹出层滑动影响body滚动问题处理

最新推荐文章于 2022-07-04 09:43:10 发布
最新推荐文章于 2022-07-04 09:43:10 发布
阅读量688 收藏
点赞数
分类专栏： 前端 文章标签： 前端 弹出层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30470459/article/details/89005513
版权

最近在制作一个弹出层效果时碰到一个问题，当遮罩弹出层显示时使用鼠标滚轮可以滚动body的滚动条。如果在弹出层里面有滚动条，将弹出层里的滚动条滑动到底部后继续滑动会导致body的滚动条滚动，在移动端手指滑动也会造成这样的问题。

image.png

未解决问题的代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹出层测试</title>
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 弹出层样式 -->
    <link rel="stylesheet" href="css/toolCase2.css">
</head>

<body>

    <!-- 增高布局 start -->
    <div style="font-size:20px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <div>49</div>
        <div>50</div>
    </div>
    <!-- 增高布局 end -->


    <!-- 弹出层布局 start -->
    <div class="toolCase-container" id="toolCase-container">
        <div class="toolCase-ulParent" style="height:100px;overflow: auto;">
            <!-- 增高布局 start -->
            <div style="font-size:20px;">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
                <div>17</div>
                <div>18</div>
                <div>19</div>
                <div>20</div>
                <div>21</div>
                <div>22</div>
                <div>23</div>
                <div>24</div>
                <div>25</div>
                <div>26</div>
                <div>27</div>
                <div>28</div>
                <div>29</div>
                <div>30</div>
                <div>31</div>
                <div>32</div>
                <div>33</div>
                <div>34</div>
                <div>35</div>
                <div>36</div>
                <div>37</div>
                <div>38</div>
                <div>39</div>
                <div>40</div>
                <div>41</div>
                <div>42</div>
                <div>43</div>
                <div>44</div>
                <div>45</div>
                <div>46</div>
                <div>47</div>
                <div>48</div>
                <div>49</div>
                <div>50</div>
            </div>
            <!-- 增高布局 end -->
        </div>
        <div class="toolCase-close" id="toolCaseClose">取消</div>
    </div>
    <!-- 控制显示按钮 -->
    <div class="toolCase opacity" id="toolCase" data-state="true"></div>
    <!-- 遮罩 -->
    <div class="toolCaseMask" id="toolCaseMask"></div>
    <!-- 弹出层布局 end -->

    <!-- 移动端自适应 -->
    <script src="js/flexible.js"></script>
    <!-- jquery库 -->
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>

        /*悬浮工具箱 js start*/
        $("#toolCaseMask,#toolCaseClose,#toolCase").click(function () {
            if ($("#toolCase-container").is(":animated")) return;
            var state = $("#toolCase").data("state");
            $("#toolCaseMask")[(state ? 'show' : 'hide')]();
            $("#toolCase-container").slideToggle(300);
            $("#toolCase").data('state', !state);
        });
        /*悬浮工具箱 js end*/

    </script>
</body>

</html>

解决办法:
设置html和body初始样式为height:100%及overflow:auto
显示弹层后设置html和body为overflow:hidden
隐藏弹层后设置html和body为overflow:auto
注:如果不设置html和body初始为overflow:auto的话，会出现第一次显示弹层后body的滚动条到最顶部的问题

解决问题后的完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹出层测试</title>
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 弹出层样式 -->
    <link rel="stylesheet" href="css/toolCase2.css">
    <style>
        html,
        body {
            height: 100%;
            overflow: auto;
        }
    </style>
</head>

<body>

    <!-- 增高布局 start -->
    <div style="font-size:20px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <div>40</div>
        <div>41</div>
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <div>49</div>
        <div>50</div>
    </div>
    <!-- 增高布局 end -->


    <!-- 弹出层布局 start -->
    <div class="toolCase-container" id="toolCase-container">
        <div class="toolCase-ulParent" style="height:100px;overflow: auto;">
            <!-- 增高布局 start -->
            <div style="font-size:20px;">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
                <div>17</div>
                <div>18</div>
                <div>19</div>
                <div>20</div>
                <div>21</div>
                <div>22</div>
                <div>23</div>
                <div>24</div>
                <div>25</div>
                <div>26</div>
                <div>27</div>
                <div>28</div>
                <div>29</div>
                <div>30</div>
                <div>31</div>
                <div>32</div>
                <div>33</div>
                <div>34</div>
                <div>35</div>
                <div>36</div>
                <div>37</div>
                <div>38</div>
                <div>39</div>
                <div>40</div>
                <div>41</div>
                <div>42</div>
                <div>43</div>
                <div>44</div>
                <div>45</div>
                <div>46</div>
                <div>47</div>
                <div>48</div>
                <div>49</div>
                <div>50</div>
            </div>
            <!-- 增高布局 end -->
        </div>
        <div class="toolCase-close" id="toolCaseClose">取消</div>
    </div>
    <!-- 控制显示按钮 -->
    <div class="toolCase opacity" id="toolCase" data-state="true"></div>
    <!-- 遮罩 -->
    <div class="toolCaseMask" id="toolCaseMask"></div>
    <!-- 弹出层布局 end -->

    <!-- 移动端自适应 -->
    <script src="js/flexible.js"></script>
    <!-- jquery库 -->
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>

        /*悬浮工具箱 js start*/
        $("#toolCaseMask,#toolCaseClose,#toolCase").click(function () {
            if ($("#toolCase-container").is(":animated")) return;
            var state = $("#toolCase").data("state");
            $("#toolCaseMask")[(state ? 'show' : 'hide')]();
            $("#toolCase-container").slideToggle(300);
            $("body,html").css(state ? { overflow: 'hidden' } : { overflow: 'auto' })
            $("#toolCase").data('state', !state);
        });
        /*悬浮工具箱 js end*/

    </script>
</body>

</html>

曾尝试使用event.preventDefault()阻止默认事件和禁止移动端触屏事件及其他方案，面对弹层中有滚动条时这些方案都不怎么好使及繁琐。

如果各位有更好解决方案或建议，请指教！

life不进则退
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css PC端弹窗时禁止底部页面滚动
且听风吟的博客
08-09 1048
css PC端弹窗时禁止底部页面滚动
jQuery+HTML5手机移动端遮罩弹出菜单代码
06-05
同时，CSS还用于实现遮罩层，它覆盖在主页面上，给用户带来沉浸式的弹出菜单体验。CSS3的新特性，如媒体查询（Media Queries），可能被用来实现响应式设计，确保菜单在不同屏幕尺寸的设备上都能正常显示。 图片资源...
body跟随遮罩层滚动
weixin_30555753的博客
08-05 157
1. 弹框不在遮罩层中，出现遮罩层和弹框两个区域移动时会造成body滚动（遮罩层位于弹框和body中间层） 1.1设置遮罩区域引起的body滚动 　　$(".pop_bg").on('touchmove',function(e){ e.preventDefault(); //阻止默认行为 }) 1.2 设置弹框区域不会引起body滚动 ...
移动端弹出遮罩层后 禁止页面滚动
喜洋杨
12-29 2104
在开发移动web的时候，相信大家都会遇到当有 fixed定位遮罩层弹出时，在屏幕上滑动能够滑动背景下面的内容，这在大部分场景下都不是和友好的，解决方法如下： CSS overflow:hidden 一般这种情况如果需要阻止滚动嘴简单的方法就是弹层弹出后，给body设置样式 overflow:hidden;在弹层隐藏的同时去掉加上的css, 不过这种并不适用与body的高度刚好是页面的高度，实际下层穿透滚动的元素是在body中的其他元素。 不能完全禁止，还是会有元素可以滚动。 body{ overf
【手记】手机网页弹出层后屏蔽底层的滑动响应
weixin_30545285的博客
12-29 58
【手记】手机网页弹出层后屏蔽底层的滑动响应 这个需求场景很常见，但好像到目前还没有一个正统的做法，以至于一搜这个问题，出来的招数五花八门，典型的包括： 给body上overflow:hidden，fixed什么的。问题在于：手机端可能没用，或者会让页面回到顶部～影响体验 简单粗暴的屏蔽touchmove。问题在于：弹出层内部需要滚动就不...
移动端弹出层弹出 body还能滚动（滚动穿透）
邓波的博客
09-21 8706
引用bootstrap的dialog组件，不过在移动端，dialog弹出，body还能滚动。 document.addEventListener('touchmove', function (event) { //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动 if ($(".modal").css('display')=="block") {
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
10-21
实现弹出遮罩层的方法有很多种，接下来本文给大家介绍通过jquery操作dom实现弹出页面遮罩层以及web端和移动阻止遮罩层的滑动，对页面弹出遮罩层的相关知识感兴趣的朋友一起看看吧
JS移动端点击弹出遮罩层
07-03
"JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计，它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层，通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...
jQuery阻止移动端遮罩层后页面滚动
10-20
本文主要介绍了jQuery阻止移动端遮罩层后页面滚动的方法。具有很好的参考价值。下面跟着小编一起来看下吧
vue解决弹出蒙层滑动穿透问题的方法
10-17
主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
弹窗滑动，造成body跟随滑动解决办法
weixin_30376083的博客
08-21 460
　　今天测试的时候遇到一个移动端的bug，为什么说是移动端的呢，因为在谷歌浏览器的移动模式下，这个是不会出现的。先描述具体的情况。一个长页面（肯定是比手机长的页面，所以肯定会滑动），里面有一个按钮，点击按钮的时候，会有一个比屏幕小的弹窗，出现游戏规则。这个游戏规则也是超出这个弹窗的大小的，多以这个弹窗也是会滑动的。 　　真机测试的时候发现，当弹窗滑动到最低端的时候，继续向上滑动，发现底部的bod...
移动端弹出窗口后，底层还能滑动问题的解决
jinti7056的博客
06-24 2654
        开始用的layer去弹窗，发现了这个问题。于是怀疑是不是layer的问题，然后尝试自己写一个弹窗，最后结果是一样的，滑动弹出层的时候，当顶层无法滑动的时候底层就也会滑动。        最后的解决办法是当弹出窗口时，把底层的position设置成fixd，这时底层会回复到最顶端，然后用动态设置css的top，设置成负的刚才滚动条的位置，然后滑动时底部怎么都不会移动了，最后在弹出层关...
弹出层内容滚动引发底层页面滚动的BUG处理
weixin_33918357的博客
12-26 1432
背景描述 页面上有个弹出层，弹出层内容较多需要滚动展示。若不做任何特殊处理的话，效果如下： pc展示 模拟器上面显示更糟糕，当底下页面滚动时，浮层的内容甚至停止了滚动（问号脸） 第一次解决 尝试使用css来解决这个问题 打开弹层的时候给html添加以下样式 .noScroll body{ overflow: hidden; position: relative; } 复制代码$...
HTML拖拽时页面滚动,javascript – 如何在jquery中拖动draggable时禁用页面滚动？
weixin_28567617的博客
06-03 447
我这样定义了一个draggable：$("#drag_area a").live("mouseup", function() {var object = $(this);var class_array = $(this).attr("class").split(" ");element(object,class_array);return false;}).draggable({containme...
通用组件——弹出层样式不对解决方案_江南春008_新浪博客
jjh0901的博客
07-01 124
在前段开发修改bug的时候经常遇到弹出层样式不正确的问题，下面说几个常见的 第一种：名称条和关闭按钮不正常 解决方法：弹出层引用缺少css样式：gezComponents/jquery/jqgrid/css/ui.jqgrid.css 第二种：弹出层关闭按钮鼠标放上去背景不变红，而是一块白色背景 解决方法：弹出层引用缺少js样式：gezComponents/jquery/jquer...
关于弹出层滑动问题
weixin_43318938的博客
10-24 755
关于弹出层滑动问题 // 2019-10-23 15:11:06 关于弹出层滑动一直以来都是一个令人难受的问题。我们一直在探索解决的方法与途径，虽然没有真正意义上的成功，也从未停止探索的步伐，直到写这篇文章的时候，我们仍未找到最完美的方法。这里记录一些探索的经验，以便后人参考。 问题阐述 先来看这样一个GIF 虽然这个例子已近是最后面对的困难，但他能更直观得提现出问题所在。 下面的弹出框是一个p...
关于移动端弹窗内容滚动底部页面不滚动的问题
MrQiu的博客
02-10 1256
弹窗内容区域可滚动，在显示弹窗的时候，底部内容区不能滚；关闭弹窗后，底部内容区可滚动。 1.弹窗内容区不需要滚动 直接在touchmove事件中设置e.preventDefault()；阻止默认事件，这样底部就不会滚动。但是弹窗内容也不会滚动了。 2.弹窗内容区需要滚动 显示弹窗时，让下面的页面 fixed 定位，弹窗消失时候，再还原 relative 定位。 .fixed { overflow: hidden; position: fixed; top: 0; left: 50%; .
解决vue h5 遮罩滚动穿透问题
lastone1212的博客
07-04 488
解决vue h5 遮罩滚动穿透问题
当html弹出弹框层时，禁止底部层滚动
hy3528的博客
12-25 1467
给点击事件中添加下面的代码，将导致底层无法滚动 $('body').css({ "overflow": "hidden", "height": '100%' })//禁止底层页面滚动 $('html').css({ "overflow": "hidden", "height": '100%' })...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值