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.scrollTopdocument.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'},// unbind 指令与元素解绑时调用unbind () {let body = document.bodybody.style.position = ''let top = body.style.topdocument.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)body.style.top = ''}}
},

自定义指令使用

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

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

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

vue中禁止页面滚动/滚动事件穿透
1.移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
vue中父元素点击事件与子元素点击事件冲突
vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候,遇到子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢?这就用到vue事件 ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
vue中使用vue-awesome-swiper的方法（实现一屏展示多个图片，点击左右滚动一张）
vue中使用vue-awesome-swiper的方法 (awesome-swiper demo官网)[https://surmon-china.github.io/vue-awesome-swipe ...
Vue中关于scoped以及scoped样式穿透的原理与使用详解
1. scoped 当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped 示例组件de ...
Vue中使用友盟CNZZ事件统计
1.在app.vue中进行引入 created() {let CNZZ_ID = "CNZZ_ID ";// 创建cnzz统计jsconst script = document.c ...

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

移动端

PC端

vue封装

自定义指令使用

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

最新文章

热门文章