今天在看技术文章的时候, 看到一个"滚动穿透问题探索"的主题. 主要需求是: 弹窗内容滚动时, 保证底层页面不滑动.
可是我发现. 不需要用"禁止掉遮罩层的滚动事件" 也能实现.
做个笔记.
基本html
<div class="mask"></div>
<div class="con">
<p>内容</p>
</div>
css
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 21000;
background: black;
opacity: 0.3;
overflow: auto;
}
.con {
width: 90%;
height: 85%;
margin: 65px auto 0;
background: #fff;
opacity: 1;
color: #333;
text-align: center;
position: absolute;
top: 0;
right: 5%;
z-index: 22000;
overflow: auto;
padding: 20px;
}
功能的实现,核心在于弹窗,蒙层和正常内容的层级关系.
上面的代码是基于mask和con两个div都在页面的顶级的.
