方法一:直接在遮罩层添加 @touchmove.prevent ,可以实现禁止页面滚动,但是同时遮罩层内部也无法滚动了。适用于内部不需滚动的场景。

方法二:(此方法可以实现需求,但是关闭遮罩层后主页面会滑动到顶部,无法回到原来的浏览位置)

    function mo = function(e){
        e.preventDefault();
    };

    //禁止滚动-在显示遮罩层的时候调用
   function stop(){
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", mo, false);
    },

    // 取消滑动限制-在关闭遮罩层的时候调用
    function move(){
        document.body.style.overflow = '';//出现滚动条
        document.removeEventListener("touchmove", mo, false);
    }

方法三:(推荐:此方法不仅可以实现需求,还会记录打开遮罩层时的位置,使关闭后仍然停在原来的位置)

// 记录页面滚动位置
  const pageLocation = ref('');

// 禁止滚动-在显示遮罩层的时候调用
  function stop(e) {
    let scrollTop = window.scrollY;//滚动的高度;
    pageLocation.value = scrollTop;
    document.body.style.position = 'fixed';
    document.body.style.top = '-' + scrollTop + 'px';
  };

  // 取消滑动限制-在关闭遮罩层的时候调用
  function move() {
    document.body.style.position = 'static';
    window.scrollTo(0, pageLocation.value);
  }

如果帮到你了,给我点个赞鼓励一下吧😁

Logo

前往低代码交流专区

更多推荐