vue中遮罩层阻止鼠标滚动及页面滚动

最新推荐文章于 2024-05-21 15:42:43 发布
原创 最新推荐文章于 2024-05-21 15:42:43 发布 · 777 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了Vue中如何利用修饰符阻止触摸和鼠标滚动事件的默认行为，@touchmove.prevent用于阻止页面滚动，@mousewheel.prevent则可以阻止鼠标滚轮产生的页面滚动，这些技巧在开发过程中对于特定交互的实现非常有用。

vue提供一个简易的事件

@touchmove.prevent ——阻止页面滚动
@mousewheel.prevent——阻止鼠标滚动

在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
带小图遮罩的 点击鼠标滚动轮播图
11-17
"带小图遮罩的点击鼠标滚动轮播图"是一个常见的交互式设计元素，广泛应用于网站、应用程序以及数字展示中。这个设计概念结合了图像轮播、鼠标滚动触发以及遮罩效果，以提供更直观且引人入胜的视觉体验。 首先，我们...
vue遮罩层阻止滚动
sslcsq的博客
11-02 3219
给vue用fixed定位加一个遮罩层，滚动鼠标滚轮发现下面一层的页面随之滚动，那么如何阻止下层页面滚动？ 我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel"> <div class="cen">弹框内容</div> </div> mousewheel(e){ e.preventDefault(); } ...
vue 遮罩层阻止默认滚动事件操作
11-20
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=”dialog”></div> 如果不是使用Vue的话，可以给body添加overflow:hidden属性解决 补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动) vue项目中弹出层时，蒙版下还可以滚动页面。 移动端解决方案 在蒙层所在div上加 @touchmove.prevent <div class=”maskBox” @touchmove.p
vue阻止鼠标滚轮事件
YanG_2859390447的博客
03-11 1677
阻止鼠标滚轮事件： mousewheel.prevent 示例： <div class=“popUp” @mousewheel.prevent>
vue项目中阻止鼠标滚轮事件
明知迷途，从未折返
02-13 7637
mousewheel.prevent &lt;div class=“popUp” @mousewheel.prevent&gt;
vue 阻止被自定义遮罩层遮罩的页面跟着鼠标滚动
最新发布
06-11
我们在Vue中需要实现一个自定义遮罩层，当遮罩层显示时，禁止底层的页面滚动（无论是鼠标滚轮还是触摸滑动）。根据引用的内容，我们可以总结出几种常见的解决方案：1.对于移动端触摸滑动：可以使用`@touchmove....
vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
m0_46183615的博客
04-21 3663
内容： 一般要求鼠标禁止滑轮滚动页面时，需要实现页面点击滚动，跌跌撞撞，走了很多弯路实现了wwwwww vue代码： // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.prevent @mousewheel.prevent <template> <div id="home-container" ref="view" @touchmove.prevent @mousewheel.prevent> // 下面是我的两个页面,第一个页面 &lt
vue 滚动表格，鼠标进入暂停
fang156239305的博客
01-19 1076
1 表格数据循环滚动 2 鼠标移到表格数据停止滚动 3 设备状态显示不同的颜色 <el-col :span="24" class="chart" style="height: 85%;"> <div class="table" style="height: 98%;overflow-y:hidden;font-size:10px;" @mouseenter="mouseEnter('Dev')" ..
禁止遮罩下页面滑动
weixin_34353714的博客
01-31 347
最近在业务中遇见一个问题，就是弹出一个蒙版，覆盖整个页面，有一部分内容固定在底部。可是底部内容还是能滑动。 我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。这边提供几个感觉还不错的方法。 如果弹出的内容不需要滚动，直接禁止touchmove或者touchstart： var content = document.getElementsByTagName('body')[0];...
vue滚动条禁止_vue中实现禁止浏览器滚动方法
weixin_39610366的博客
12-20 3114
大家好，本次在开发项目中，点击按钮，弹出一个自定义的弹出窗口和遮罩层，因为页面的超出一屏，有滚动条，但是想让弹出窗时候，禁止浏览器滚动，那么就简单写一个方法给大家。首先，我们打开我们的txt文本，开始敲代码吧！嗯... 算了，不装逼了，还是打开代码编辑器吧！思路是这样的，当弹窗弹出时候，让body overflow:hidden;超出隐藏，当取消弹窗时候，再让 overflow: visi...
vue项目中自定义表格滚动，鼠标移入停止，移出继续滚动
birdcoder的博客
06-09 935
vue项目中自定义表格滚动，鼠标移入停止滚动，移出继续滚动
移动端vue项目解决遮罩层滚动穿透问题
weixin_42552058的博客
11-28 1495
三种穿透滑动情况以及解决办法 1.引用mintui中mt-popup下拉选择框选择内容时，滑动穿透问题 （1）如果下拉选择内容过少，mt-popup内部不需要滑动： 就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件 <mt-popup v-model="popupVisible" position="bo...
vue设置遮掩层禁止滚动
ZHXT__的博客
06-17 622
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 可以给body添加overflow:hidden属性解决, 但是还有值得一提的是,虽然touchmove不会动,但是鼠标使用滚动键还是会滚动 ...
vue+element 做滑动出现遮罩层效果
岁月如歌去，十年弹指间
05-11 1869
<template> <div class="homeCom maxCom"> <div class="content-djnr"> <h3 class="content-title"> 医院对接内容 </h3> <ul class="dj-item"> <li v-for="(item, index) in djLis...
Vue @click.stop 与 @mousewheel.prevent
卡尔特斯
10-22 4450
mixins的使用 @click.stop 点击子标签不需要触发父标签的事件 <div @click="tempClick"> <div @click.stop="subTempClick"></div> </div> 盖上遮罩之后不需要下面内容支持滚动 @mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask"></div>...
遮罩层弹起禁止页面滚动
qq_38629000的博客
08-30 313
有时候我们会发现遮罩层弹起的时候￥背后页面touchmove的时候依然可以滚动而导致页面滚动所以我们可以取消默认事件来解决一下。 $(document).on("touchmove",function(e){     if(e.target.className.indexOf("")&gt;0){      e.preventDefault(); } })  ...
遮罩层内的元素滚动时不让遮罩层底下的元素滚动的办法
qq_39174318的博客
05-21 857
打开遮罩层的时候, 获取body元素的样式, 然后设置position为relative;overflow为hidden;这样页面就不会滚动了, 但是遮罩层可以滚动, 这里是从。知道的, 但是文中说, 如果给body设置了这俩样式属性后, 不管遮罩内的还是遮罩底下的都不会滚动, 但是实际操作发现, 遮罩内的会滚动, 遮罩底下的不会滚动.H5端目录列表的遮罩层在遮挡住文章内容后, 滚动目录列表会引起文章内容的滚动. 想要的效果打开目录列表遮罩层时仅目录列表滚动.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这次最后一次熬夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值