移动端vue项目解决遮罩层滚动穿透问题

1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加 ：@touchmove.prevent

2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动

# 弹窗弹起
document.body.classList.add("dialog");

# 弹窗关闭
document.body.classList.remove("dialog");

# 全局css
.dialog {
    overflow: hidden;
    height: 100%;
}

缺点：背景每次都会回到顶部

3、蒙层上的页面内容长于页面高度需要进行滑动时，出现的滑动穿透问题

methods: {
  //禁止滚动
  stopScroll(){
     let _scrollTop = document.scrollingElement.scrollTop;
     this.scrollTop = _scrollTop;
     document.body.classList.add("dialog");
     document.body.style.top = -_scrollTop + 'px';
   },
   /***取消滑动限制***/
   canScroll(){
     document.body.classList.remove("dialog");
     document.scrollingElement.scrollTop = this.scrollTop;
   },
}

# 全局css
.dialog {
    overflow: hidden;
    height: 100%;
}

弹窗弹起调用：stopScroll();
弹窗关闭调用：canScroll();