遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)

最新推荐文章于 2024-12-03 12:13:07 发布

原创最新推荐文章于 2024-12-03 12:13:07 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

web 同时被 3 个专栏收录

18 篇文章

订阅专栏

css3

8 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

在移动端开发中，当使用遮罩层弹出窗口时，通常需要阻止底部内容滑动。本文介绍了如何通过设置底部内容的overflow: hidden以及在遮罩层的touchmove事件上阻止默认事件来实现这一功能。在关闭遮罩层后恢复事件处理，确保在touch/wx/app环境中，即使webview存在弹性滚动，也能确保底部内容静止。

问题源自实践

在touch和app端如果需要做一个嵌入的html页面，如果需要做弹窗的话一般需要使用一个遮罩层的，然后在遮罩层设计弹出窗的内容，一般弹出窗是active之后，底部的内容是需要完全静止的(数据更新除外哈),在遮罩上进行的操作不能渗透到底部去，这种情况一般体现在遮罩层滑动需要禁止底部内容滑动，这种情况我们一般的处理方法是在弹出事件中设置底部内容的over-flow：hidden，在关闭遮罩层之后在解除禁止。在3w端包括在chrome的模拟器中可以使用。

那么问题就在于：在touch/wx/app中，我们相当于在webview内容元素中嵌入了一个html页面，webview中的内容和属性无法控制，但是一般移动端在顶部和底部都存在一个弹性滚动，在遮罩层弹出之后还是存在；

所以为了避免这种方法：可以为modal层的touchmove事件设置一个无效的响应事件，并且阻止默认事件，在关闭弹出层之后恢复，经过实际测试是可以达到完全静止底部内容包括容器自带的弹性滚动。由于在移动端才能测试这种效果，这里就通过代理来测试移动端了

<!docutype html>
<html>
    <head>
        <title>modal-test</title>
        <style type='text/css'>
            .bodyOver{
                overflow-y: hidden;
            }
            .contentBox{
                text-align: center;
                width:100vw;
                height: 200vh
            }
            .modal{
                display: none;
                position: fixed;
                top:0;
                left:0;
                width: 100vw;
                height: 100vh;
                background: rgba(66, 66, 66, 0.5);
                text-align: center;
                padding-top:20%;
            }
            .show{
                display: block;
            }      
        </style>
    </head>
    <body>
        <div class='contentBox'>
            <h2>this is content width height 200vh</h2>
            <Button id='toggleModal'>Modal</Button>
        </div>
        <div class='modal'>
            <button id='btnInModal'>click test </button>
        </div>
        <script>
            document.getElementById('toggleModal').addEventListener('click', () => {
                document.getElementsByClassName('modal')[0].classList.add('show');
                document.getElementsByTagName('body')[0].classList.add('bodyOver');
            })
            document.getElementById('btnInModal').addEventListener('click', () => {
                document.getElementsByClassName('modal')[0].classList.remove('show');
                document.getElementsByTagName('body')[0].classList.remove('bodyOver');
            })
        </script>
    </body>
</html>