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

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

做个笔记.

基本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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 别的花都已开,而我的花期还未到,在等待中痛并快乐着,只有享受当下,才不负韶华。
    找到另一个自己阅读 137评论 0 0
  • 宁向东 第一个层次是扫读。有点像领导听例会上的汇报,都是常规情况,多听一耳朵,少听一耳朵,无所谓。这个层次的读书,...
    邓慧娟阅读 134评论 0 0
  • 一次次的坎坷失意真的证明我不会谈情,每次小心翼翼却都隐藏了自己无知的懦弱和牵强,曾经因为有她而感到无比骄傲...
    说他真的阅读 200评论 0 1