vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决相关的知识,希望对你有一定的参考价值。

弹出层时,蒙版下还可以滚动页面

移动端

在蒙层所在div上加 @touchmove.prevent

<div class="maskBox" @touchmove.prevent></div>

PC端

弹层显示时调用 stopMove()停止页面滚动 ,弹层消失时调用 Move()开启页面滚动

//停止页面滚动
stopMove(){
  let m = function(e){e.preventDefault();};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
},
//开启页面滚动
Move(){
  let m =function(e){e.preventDefault();};
  document.body.style.overflow='';//出现滚动条
  document.removeEventListener("touchmove",m,{ passive:true });
}

vue封装

directives: {
  fixed: {
	// inserted 被绑定元素插入父节点时调用
	inserted () {
	  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
	  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
	},
	// unbind 指令与元素解绑时调用
	unbind () {
	  let body = document.body
	  body.style.position = ''
	  let top = body.style.top
	  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
	  body.style.top = ''
	}
  }
},

自定义指令使用

<div  v-if="isShowRecordModal" v-fixed>
    ....
    ....
</div>

 该指令的注意点是必须使用v-if开启关闭弹窗,因为该指令依赖于dom的插入和注销,使用v-show是肯定不行的。

 

以上是关于vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决的主要内容,如果未能解决你的问题,请参考以下文章

蒙层禁止页面滚动的方案

移动端在有弹出层时如何禁止底层的滚动

弹出层完美禁止页面滚动

vue阻止事件冒泡,事件穿透

页面弹出全屏浮层或遮罩时,禁止底层body滚动

弹出遮罩层后禁止滚动效果