博客

vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好



设置:lock-scroll=”false”时，规则里面的滑块才会滚动，overflow-y才会生效—->这是个坑




上代码

1、封装一个函数

新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
let _scrollTop = 0;
class ModalHelper {
  // popup 显示时调用
  static afterOpen() {
    _scrollTop = document.scrollingElement.scrollTop;
    document.body.style.position = "fixed";
    // 设置完fixed，页面会变宽，需要控制下
    document.body.style.width = 100 + "vw";
    document.body.style.top = -_scrollTop + "px";
  }
  // popup 关闭时调用
  static beforeClose() {
    document.body.style.position = "";
    document.body.style.top = 0;
    // 使 scrollTop 恢复原状
    document.scrollingElement.scrollTop = _scrollTop;
  }
}

export default ModalHelper;

2、全局引入

import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper

3、在页面中使用，监听是否弹出

 watch: {
    show(val) {
      if (val) {
        this.$modalHelper.afterOpen(); // 打开禁用
      } else {
        this.$modalHelper.beforeClose(); // 关闭禁用
      }
    }
  }