解决移动端滚动穿透

 <div class="wrapper">
        <img src="./static/background.png" class="background">
        <div class="popup">
            <div class="mask"></div>
            <div class="content">
                页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
            </div>
        </div>
    </div>


.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 60%;
  height: 200px;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
}



let scrollTop;
// 表示弹窗打开
popup.addEventListener('show', () => {
    // 记住当前的滚动位置
    scrollTop = body.scrollTop;
    body.style.overflow = 'hidden';
    body.style.height = '100vh'
})
// 表示弹窗关闭
popup.addEventListene('close', () => {
    // 把当前的滚动位置设置为先前的scrollTop
    body.scrollTop = scrollTop;
    body.style.overflow = 'auto';
    body.style.height = 'auto'
})