弹窗B滑动，禁止下层A scroll滚动

最新推荐文章于 2023-05-22 17:41:11 发布

原创最新推荐文章于 2023-05-22 17:41:11 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

当弹窗B滑动时，下层元素A的滚动无法被阻止，即使使用了event.stopPropagation()和event.preventDefault()。分析发现这可能是浏览器行为，当body高度超过100vh时会出现该现象。解决方案是限制body高度不超过100vh，避免出现滚动条，从而阻止下层元素滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

不管如何禁止（event.stopPropagation();event.preventDefault()），阻止默认事件，中断消息传播，都不行。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .scrollbox{
            width: 100%;
            //height: 100vh;//----------------------------------->这里是关键
            background-color: aquamarine;
            overflow: scroll;
        }
        .scroll{
            position: absolute;
            top: 100px;
            width: 100%;
            height: 400px;
            background-color: beige;
            overflow: scroll;
        }
        .neirong{
            height: 700px;
            background-color:coral;
        }
    </style>
    
</head>
<body>
    <div class="scrollbox">
            3<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            6<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            2<br>3<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            6<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            2<br>3<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            6<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            2<br>
        
    </div>
    <div class="scroll">
            <div class="neirong">
                3<br>
                1<br>
                1<br>
                1<br>
                1<br>
                1<br>
                1<br>
                6<br>
                1<br>
                1<br>
                1<br>
                1<br>
                1<br>
                1<br>
                2<br>
            </div>
    </div>
</body>
<script>
        let scrolldiv = document.querySelector('.scroll');
        scrolldiv.addEventListener('touchstart',function(event){
            console.log(this,event)
            // event.stopPropagation();
        },
        false
        )
        let scrollbox = document.querySelector('.scrollbox');
        scrollbox.addEventListener('touchstart',function(event){
            console.log('body-------------',this,event,)
            // event.preventDefault()
            // event.stopPropagation();
        }
        // ,{ passive: false}
        )
    </script>
</html>