如何实现无内容也可滚动两屏的弹窗 解决滚动时背景页面滑动问题

核心逻辑 #

需要同时解决两个问题：滚动事件穿透到背景页面、无内容时弹窗可滚动两屏的高度支撑，具体修改如下： #

1. CSS样式修改 #

外层弹窗容器.div1调整 #

.div1{
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  height: 100%;
  width: 100%;
  display: block;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.9);
  /* 允许弹窗竖向滚动 */
  overflow-y: auto;
  /* 阻止滚动触边时穿透到背景，移动端兼容 */
  overscroll-behavior: contain;
}

内层内容容器.div2调整 #

.div2{
  position: relative;
  width: 100%;
  text-align: center;
  margin: 30px auto 0 auto;
  /* 最小高度设置为2倍视口高度，无内容也能支撑出两屏的滚动距离 */
  min-height: 200vh;
}

2. 可选：彻底禁止背景滚动 #

如果要完全避免背景滚动，在弹窗打开/关闭时切换body的滚动状态即可：

// 弹窗打开时执行
document.body.style.overflow = 'hidden'
// 弹窗关闭时执行
document.body.style.overflow = 'auto'

内容的提问来源于stack exchange，提问作者Helpme