禁止弹窗蒙版底部滚动

作者: 奋斗的小小小兔子 | 来源:发表于2018-09-16 20:13 被阅读18次

禁止弹窗蒙版底部滚动
移动端禁止弹出层背景滚动
遮罩层弹出后，禁止被遮罩部分滚动
移动端弹窗禁止底部滚动页面
小程序弹窗禁止底部内容滚动
小程序弹窗禁止底部内容滚动
弹窗滚动时,如何禁止底部滑动
[Tricks] 移动端弹出层
2021-07-09 Vue 解决移动端滑动穿透问题
弹窗

打开弹窗时，给body添加class,body-fixed


.body-fixed {
  position: fixed;
  width: 100%;
}

弹窗打开时给body添加类body-fixed

这种方法有个弊端，假设在页面滑到底部，打开弹窗，背景会定位到顶部。

使用flex

<html>
<style>
html,
body {
   width: 100%;
   height: 100%;
}   
.container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.main {
   flex: 1;
   overflow: scroll;
}
.modal {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background:rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
}
</style>
<body>
     <div class="container">
         <div class="main">.....页面主要内容...</div>
         <div class="modal">弹框内容</div>
     </div>
</body>
</html>

这种方法也有个弊端：由于使用了overflow，导致在移动端时，页面会异常卡顿。

打开弹窗时，给body添加modal-open类

.modal-open {
  overflow-y: hidden;
}

另，react给body加class

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}

参考资料