弹窗滚动时,如何禁止底部滑动

今天在看技术文章的时候, 看到一个"滚动穿透问题探索"的主题. 主要需求是: 弹窗内容滚动时, 保证底层页面不滑动.
可是我发现. 不需要用"禁止掉遮罩层的滚动事件" 也能实现.

做个笔记.

基本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都在页面的顶级的.

参考: https://juejin.im/post/5c49bc74e51d4504314306e6