vue中禁止页面滚动/滚动事件穿透

1.移动端

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

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

2.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中禁止页面滚动/滚动事件穿透相关推荐

vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面移动端在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
uniapp禁止页面上下滚动
uniapp禁止页面上下滚动功能场景第一个方法"app-plus":{"bounce":"none"} 第二个方法功能场景我目前是在 ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
vue中实现公告栏的滚动特效
vue中实现公告栏的滚动特效文章目录 vue中实现公告栏的滚动特效前言修改版本前言 vue中实现公告栏的滚动特效修改版本 <template><div id="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中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...

vue中禁止页面滚动/滚动事件穿透

1.移动端

2.PC端

vue中禁止页面滚动/滚动事件穿透相关推荐

最新文章

热门文章