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

63 阅读 0 评论 42 点赞

我是靠谱客的博主孤独小丸子，最近开发中收集的这篇文章主要介绍遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题源自实践

在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>