vue 遮罩层阻止默认滚动事件

最新推荐文章于 2025-10-17 14:08:34 发布
原创 最新推荐文章于 2025-10-17 14:08:34 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js

本文介绍在Vue中如何使用@touchmove.prevent方法解决遮罩层弹出后页面仍可滚动的问题，同时提供了非Vue环境下通过修改body样式来达到相同效果的方案。

vue 遮罩层阻止默认滚动事件
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 
vue中提供 @touchmove.prevent 方法可以完美解决这个问题

<div class="dialog" @touchmove.prevent ></div>
 
如果不是使用Vue的话，可以给body添加overflow:hidden属性解决
 

解决移动端fixed遮罩弹窗滚动击穿的vue指令
08-10
解决移动端fixed遮罩弹窗滚动击穿的vue指令
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
通过事件监听和阻止默认行为，以及利用Vue的响应式系统和`ref`属性，我们可以优雅地控制页面的滚动行为，适应不同的交互需求。在实际开发中，根据项目的具体需求，灵活运用这些技巧，能够提升用户体验，使应用更加...
vue 遮罩层阻止默认滚动事件操作
10-15
主要介绍了vue 遮罩层阻止默认滚动事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue + Element UI 实现 el-scroll 滚动与鼠标滚轮监听全攻略
最新发布
IT古董
10-17 1268
本文详细介绍了在Vue+ElementUI项目中监听el-scrollbar滚动事件的实用技巧。主要内容包括：1）基础滚动监听获取scrollTop/Left；2）滚动到底触发加载更多的实现；3）通过wheel事件捕获鼠标滚轮方向；4）阻止默认滚动实现自定义控制。文章提供了完整代码示例，帮助开发者掌握el-scrollbar的核心交互功能，提升页面滚动交互体验。适合需要实现懒加载、自定义滚动行为等场景的前端开发者参考。
【Vue】24.遮罩层阻止默认滚动事件
返璞归真
07-15 1441
在写移动端页面的时候，弹出遮罩层后，我们仍然可以滚动页面。vue中提供@touchmove.prevent.stop，@mousewheel.prevent方法可以完美解决这个问题。 <div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div> 如果不使用vue的话，可以给body添加ov...
vue 弹出遮罩层样式实例
10-15
为了解决这个问题，我们可以阻止遮罩层内的触摸滚动事件。在Vue中，我们可以通过监听`@touchmove`事件并阻止其默认行为来实现这一点： ```html <div class="popContainer" v-show="isVisible" @touchmove.prevent>...
vue 阻止被自定义遮罩层遮罩的页面跟着鼠标滚动
06-11
如果出现内部滚动卡顿，可以尝试不阻止内部滚动元素的事件（即去掉`@touchmove.stop`），因为遮罩层阻止事件并不会影响内部滚动，因为内部滚动元素的事件不会冒泡到遮罩层（因为内部元素在遮罩层内部，事件被内部...
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
阻止默认滚轮事件
weixin_30809333的博客
07-17 236
; !function () { var keys = { 37: 1, 38: 1, 39: 1, 40: 1 }; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e...
vue遮罩层阻止滚动
sslcsq的博客
11-02 3225
给vue用fixed定位加一个遮罩层，滚动鼠标滚轮发现下面一层的页面随之滚动，那么如何阻止下层页面滚动？ 我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel"> <div class="cen">弹框内容</div> </div> mousewheel(e){ e.preventDefault(); } ...
JS-事件委托-阻止事件冒泡和阻止默认行为-滚动事件-加载事件-元素尺寸位置
m0_62181310的博客
06-29 1237
目录1.事件委托2.阻止事件冒泡和阻止默认行为3.滚动事件4.加载事件5.元素尺寸和位置offset 家族client 家族scroll 家族 2.阻止事件冒泡和阻止默认行为 阻止冒泡是就让事件不再从子级向父级【传播】在事件回调函数中通过 ev.stopPropagation()一些标签自带了某些功能，比较典型的两个：a 标签 和 form 标签事件回调中的 ev.preventDefault()scroll 事件与 click input change keyup 等,没有什么本质上的区别。load
vue中禁止页面滚动/滚动事件穿透
qq_42905523的博客
05-11 9867
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='hi
vue 遮罩层 - 禁止滚动事件
xqhys的博客
08-01 2708
页面上有遮罩层，但是下面页面过长，不允许页面滑动~ 解决：@touchmove.stop.prevent
vue设置遮罩层 怎么防止底层滚动
weixin_34418883的博客
04-25 2594
<template> <div> <div id="contain" :class="showBanner?'active':''"> <div class="head center"> <p class="bigtitle blue">冠品小...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值