vue中禁止页面发生滚动

Posted 2023-04-03

参考技术A 在Vue组件一个属性, 用于存储禁止滚动函数(变量也行,目的是在实现的时候禁止滚动函数能指向同一内存地址)

mounted函数只是一个例子, 实际应用中可放入任何事件中进行测试

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);