vue遮罩层出现禁止穿透遮罩滚动页面

最新推荐文章于 2024-04-07 14:29:11 发布
原创 最新推荐文章于 2024-04-07 14:29:11 发布 · 950 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue.js中使用@touchmove.prevent阻止元素上的触摸移动事件的方法，这对于创建响应式网页和移动应用非常有用。

在这里插入图片描述
直接在标签上加@touchmove.prevent

<div class="img-view" @click="bigImg" @touchmove.prevent>
	<!-- 遮罩层 -->
	<div class="img-layer" @touchmove.prevent></div>
	<div class="img" @touchmove.prevent>
		<img :src="imgurl" @touchmove.prevent>
	</div>
</div>
HXH_csdn
关注
vue 遮罩层阻止默认滚动事件操作
11-20
在 Vue 中，我们可以将 `@touchmove.prevent` 事件监听器添加到遮罩层的组件元素上，以防止用户在遮罩层出现时滚动页面。例如： ```html <div class="dialog" @touchmove.prevent></div> ``` 在这个例子中，`@...
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
vue 背景弹出禁止滚动_vue 遮罩层阻止默认滚动事件操作
weixin_42202595的博客
12-23 1652
vue 遮罩层阻止默认滚动事件操作在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供 @touchmove.prevent 方法可以完美解决这个问题如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙...
vue遮罩层阻止滚动
sslcsq的博客
11-02 3219
给vue用fixed定位加一个遮罩层，滚动鼠标滚轮发现下面一层的页面随之滚动，那么如何阻止下层页面滚动？ 我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel"> <div class="cen">弹框内容</div> </div> mousewheel(e){ e.preventDefault(); } ...
vue初始阻止滚动事件
YhWyl527的博客
11-04 550
//停止页面滚动 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.overf
vue项目加顶部蒙层移动端禁止页面滑动问题
七七呀
04-18 3827
项目中加顶部蒙层，发现滑动时底部页面内容会正常滚动 ，解决方案：直接在蒙层所在div上加@touchmove.prevent就好了如下：&lt;div class="masktop" @touchmove.prevent&gt;&lt;/div&gt;...
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
JackieDYH的博客
05-26 2080
弹出层时，蒙版下还可以滚动页面 移动端 在蒙层所在div上加@touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端 弹层显示时调用 stopMove()停止页面滚动，弹层消失时调用 Move()开启页面滚动 //停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.s...
vue解决弹出蒙层滑动穿透问题的方法
10-17
具体实现代码中，开发者使用了Vue的class绑定功能动态绑定noScroll类，当消息蒙层显示时，通过CSS切换到相关样式，禁止列表的垂直滚动。此外，对于蒙层中的每行文字，通过点击事件绑定messageTitleClick(num)方法来...
vue遮罩层滚轮穿透
05-26
为了防止滚动穿透，可以给遮罩层的父元素设置 `overflow: hidden`，这样在遮罩层出现时，页面的滚动条就会被隐藏掉，避免了滚动穿透的问题。 以下是一个示例代码： ``` 显示遮罩层 ...
解决移动端fixed遮罩弹窗滚动击穿的vue指令
08-10
在移动端Web应用开发中，经常会遇到这样一个问题：当一个fixed定位的遮罩层或弹窗出现时，页面的背景内容仍然可以滚动，这被称为“滚动击穿”现象。这种问题在Vue.js应用中同样存在。本文将深入探讨这个问题，并提供...
Vue出现弹出层时，禁止底部页面跟随滑动
benetan的专栏
07-23 2808
最近做VUE发现在图层滑动上，不能阻止下层滑动，还停留在以前的css样式控制上。 转自：https://blog.youkuaiyun.com/wh_xmy/article/details/89492622 背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmo...
vue picker阻止穿透滚动
HXH_csdn的博客
01-08 1151
在开发vue项目我用到了mint-ui框架,使用picker组件在手机上滑动的时候,body页面也跟着一起滑动 解决的思路: 就是弹出层打开时禁止body的滚动事件，弹出层关闭时恢复body的滚动事件,通过监听popupGender变量,在弹窗出现后禁止body节点touchMove事件 <mt-popup v-model="popupGender" position="bottom"&gt...
html 遮罩层穿透问题,css div实现的遮罩层完美兼容IE6-IE9 FireFox
weixin_36181866的博客
06-02 452
Html代码：复制代码代码如下: 数据加载中，请稍后...CSS样式：复制代码代码如下:/*loading加载遮罩层css*/#black_overlay{position: fixed;z-index: 1000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=80);opacity: 0.8;overflow: hid...
vue页面局部及弹窗--禁止滚动（移动端+pc端）
Hassan的小博客!
11-25 1034
vue页面局部及弹窗–禁止滚动 //移动端禁止滚动 <div class="mask" @touchmove.prevent></div> //PC端禁止滚动 <div class="mask" @scroll.prevent></div>
vue-解决弹出蒙层滑动穿透问题
西门吹雪
11-22 8814
vue-解决弹出蒙层滑动穿透问题 遇到的问题】 在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。 【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动。 　 【实现思路】 1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用 @touchmov
vue中禁止页面滚动/滚动事件穿透
有问题可关注公众号：前端研究院 后台输入问题回复
08-19 944
vue中禁止页面滚动/滚动事件穿透
解决Vue移动端弹窗滚动穿透
seevc的专栏
06-16 769
在弹窗显示时，设置body的style的overflow属性值为hidden，弹窗关闭时恢复原来设置；弹窗内容滑动到底部，再向上滑动弹窗底部内容跟随滑动；弹窗内容滑动到顶部，再向下滑动弹窗底部内容跟随滑动；
组元素滚动穿透的解决方案
最新发布
weixin_51737813的博客
04-07 417
这是当滚动条在顶部以及在底部时候就会穿透，只要判断顶部是否触底以及底部是否触底判断，来让手指事件取消，但是如果同时出现X和Y轴都有滚动，那么就要限制X 和Y轴一起判断，当角度小于45度时候就不要限制手指事件，这样用户在滚动才不会卡住。2.如果没有遮罩层，也要动态滚动父组件，也要滚动子组件并且子组件的滚动条禁止穿透到父组件，怎么解决？1.如果是有遮罩层的，直接禁止父元素滚动条overflow-y: hidden;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值