vue中禁止页面发生滚动

js禁止页面发生滚动以及恢复

vue中禁止页面发生滚动

{
    data() {
        defferScroll: function (event) {
            event.preventDefault()
        }
    },
    mounted() {
        document.body.addEventListener("touchmove", that.defferScroll, {passive: false});
        document.body.addEventListener("wheel", that.defferScroll, {passive: false});
    }    
}

恢复滚动

mounted() {
    document.body.removeEventListener("touchmove", that.defferScroll, {passive: false});
    document.body.removeEventListener("wheel", that.defferScroll, {passive: false});
} 

总结

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

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