vue-cli的蒙层组件内部滑动时禁止主页面的滑动

最新推荐文章于 2023-10-17 08:39:58 发布

我懂个屁啊我

最新推荐文章于 2023-10-17 08:39:58 发布

阅读量317

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41866622/article/details/104743265

版权

需求：显示带蒙层组件时，组件内容滑动的同时禁止主页面

思路：分别在组件加载和销毁时禁用和恢复窗口的touchmove事件

mounted() {
    // 加载组件时禁止主页面的滑动
    let m = function(e) {
      e.preventDefault();
    };
    document.body.style.overflow = "hidden";
    document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
  },
  destroyed() {
    // 组件销毁时恢复页面的滑动
    let m = function(e) {
      e.preventDefault();
    };
    document.body.style.overflow = ""; //出现滚动条
    document.removeEventListener("touchmove", m, { passive: true });
  }