解决遮罩层底部内容滚动的问题

如果遮罩层里里面的内容不需要滚动

则直接在遮罩层上加 touchmove.prevent

如果遮罩层里面还有内容需要滚动

1.在全局样式中添加

/* 配合解决蒙层问题 */
body.mongolia_open {
  position: fixed;
  width: 100%;
}

2.export两个方法

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
export const MaskProblem = ((bodyCls) => {
  let scrollTop
  return {
    afterOpen: function () {
      scrollTop = document.scrollingElement.scrollTop
      document.body.classList.add(bodyCls)
      document.body.style.top = -scrollTop + 'px'
    },
    beforeClose: function () {
      document.body.classList.remove(bodyCls)
      document.scrollingElement.scrollTop = scrollTop
    }
  }
})('mongolia_open')

3.在遮罩层打开和关闭时候分别调用

MaskProblem.afterOpen()
MaskProblem.beforeClose()