美文网首页
vue中禁止遮罩底层页面滑动

vue中禁止遮罩底层页面滑动

作者: jing_bao | 来源:发表于2020-08-04 17:30 被阅读0次

方法一:
在点击事件(弹出弹框)时,添加

document.querySelector('body').setAttribute('style', 'position:fixed;left: 0px;right: 0px;overflow: hidden;')

在隐藏弹框时

document.querySelector('body').removeAttribute('style')

方法二:
在点击事件(弹出弹框)时,添加

  let custom =function(e){e.preventDefault();};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove", custom,false);//禁止页面滑动

在隐藏弹框方法中,添加

 let custom=function(e){e.preventDefault();};
 document.body.style.overflow='auto';//出现滚动条
 document.removeEventListener("touchmove", custom,false);

相关文章

  • vue中禁止遮罩底层页面滑动

    方法一:在点击事件(弹出弹框)时,添加 在隐藏弹框时 方法二:在点击事件(弹出弹框)时,添加 在隐藏弹框方法中,添加

  • 一、移动端相关问题

    1.移动端禁止遮罩层下面的页面滑动 答:打开遮罩层的时候,给遮罩层下面的页面添加position:fixed属性,...

  • 禁止遮罩下页面滑动

    最近在业务中遇见一个问题,就是弹出一个蒙版,覆盖整个页面,有一部分内容固定在底部。可是底部内容还是能滑动。 我相信...

  • vue禁止页面滑动

  • 自定义遮罩层弹出时禁止页面滚动以及恢复

    人不狠话不多,就一句,好记性不如烂笔头。 vue项目里的禁止以及恢复滚动 // 遮罩层弹出时禁止滑动 d...

  • #自定义弹出框页面滑动问题

    在main.js中设置全局函数 在页面使用时: 禁止主页面滑动 this.noScroll() 主页面可滑动 th...

  • 移动端禁止页面滑动

    移动端禁止页面滑动 场景是这样滴~一般H5活动 达到某一条件弹出提示 往往是遮罩层 用户在遮罩层上只能进行指定的操...

  • vue中禁止页面发生滚动

    js禁止页面发生滚动以及恢复 vue中禁止页面发生滚动 恢复滚动 总结 在Vue组件一个属性, 用于存储禁止滚动函...

  • Vue 弹出框禁止页面滑动

    今天遇到一个问题,页面弹出框内的数据可以滑动,但是弹出框的底层,也就是当前页面不允许滚动,试了许多方法,都没有解决...

  • mpvue开发小程序

    手动设置每个页面的标题 弹窗遮罩出来以后禁止滚动

网友评论

      本文标题:vue中禁止遮罩底层页面滑动

      本文链接:https://www.haomeiwen.com/subject/ralsrktx.html