vue頁面禁止蒙層底部滾動

方法一：

函數名 popupVisible，我是把這個方法放到vuex裏面， 滾動高度用變量top表示

state: {
    pageLoad: !0,
    top: 0, // 頁面滾動的高度
  },　

popupVisible(state, newValue) {
      if (newValue) {
        // 頁面固定
        state.top = window.scrollY;
        console.log("true--state.top", state.top);
        document.body.style.position = "fixed";
        document.body.style.top = -state.top + "px";
      } else {
        // 頁面滾動
        console.log("false--state.top", state.top);
        document.body.style.position = "";
        document.body.style.top = "";
        window.scrollTo(0, state.top);
      }
    },

actions 裏面commit 該mutations方法：

hidePass({ commit }, params) { // commit對象
      commit('popupVisible', params);
    }

vue頁面引用：

// 禁止蒙層底部滾動

this.$store.dispatch("hidePass", true);

// 容許

this.$store.dispatch("hidePass", false);

方法二:(推薦)

<!-- 蒙層 -->

<div @click.stop="hide" @touchmove.prevent      class="CustomPopup"></div>

使用  @touchmove.prevent  禁止穿透到底部