阻止vue移动端滑动事件穿透

最新推荐文章于 2025-06-25 15:46:41 发布
最新推荐文章于 2025-06-25 15:46:41 发布
阅读量6.3k 收藏 3
点赞数 2
分类专栏： vue
本文介绍了解决移动端项目中遮罩层滑动时，遮罩层下区域一同滑动的问题。提供了两种方法：一是使用Vue阻止默认事件；二是通过调整遮罩层下方区域的CSS样式为绝对定位。

项目遇到的问题

移动端项目，css设置遮罩层，遮罩层有纵向滚动条，触摸滑动遮罩层，遮罩层下面的区域也一起滑动。

解决方法

1.如果遮罩层也不需要响应滑动。直接在遮罩层上面使用vue的“阻止默认事件”：@touchmove.prevent
在这里插入图片描述
2. 遮罩层有滚动条，也需要响应滑动。在遮罩层出现的时候给遮罩层下面的区域css样式实现绝对定位，定在页面中，遮罩层消失的时候。移除样式。
css 样式：在这里插入图片描述

vue 背景弹出禁止滚动_vue 遮罩层阻止默认滚动事件操作
weixin_42202595的博客
12-23 1627
vue 遮罩层阻止默认滚动事件操作在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供 @touchmove.prevent 方法可以完美解决这个问题如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙...
vue移动端去哪儿旅游网
qq_42857403的博客
04-14 465
##vue移动端去哪儿旅游网 说明： 1、该项目是对移动端去哪儿网的仿写，实现了从首页、城市选择、详情页面，是一个前后端分离的开源目，实现了前端内容的编写。 2、主要技术栈：Vue+Vue-router+Vuex++Axios+stylus+fastclick+swiper+BetterScroll Gitee地址：https://gitee.com/hoona/travel-self 演示视频地址：https://v.qq.com/x/page/h323971xslk.html 页面： 首页页面、城市选择
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 picker阻止穿透滚动
HXH_csdn的博客
01-08 1132
在开发vue项目我用到了mint-ui框架,使用picker组件在手机上滑动的时候,body页面也跟着一起滑动 解决的思路: 就是弹出层打开时禁止body的滚动事件，弹出层关闭时恢复body的滚动事件,通过监听popupGender变量,在弹窗出现后禁止body节点touchMove事件 <mt-popup v-model="popupGender" position="bottom"&gt...
彻底解决PC滚动穿透问题
最新发布
m0_58830399的博客
06-25 329
本文介绍了一种防止滚动穿透的解决方案。当气泡框内部触发滚动时，传统CSS属性overscroll-behavior:contain存在局限性（仅对可滚动区域有效）。为此作者封装了一个通用的Vue Hooks函数useScrollIsolate，通过JS监听目标元素的滚轮事件，判断内部元素是否可继续滚动：若可滚动则不处理，若不可滚动则阻止事件冒泡，避免触发外部滚动条。该方案支持多种元素选择方式（选择器/Ref/回调函数），并在组件挂载/卸载时自动管理事件监听，有效解决了滚动穿透问题。
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
JackieDYH的博客
05-26 1987
弹出层时，蒙版下还可以滚动页面 移动端 在蒙层所在div上加@touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端 弹层显示时调用 stopMove()停止页面滚动，弹层消失时调用 Move()开启页面滚动 //停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.s...
VUE阻止移动端滑动默认行为
yangwq的博客
11-12 1968
VUE阻止移动端滑动默认行为 <template> <div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart="start"></div> </template> <script> export default { props: { // 取消走势图默认事件 stopPrev: { type: Boolean, def
Vue项目移动端滚动穿透问题的实现
10-15
总结来说，解决Vue项目移动端滚动穿透问题的关键在于正确地处理触摸事件和模拟滚动位置。通过阻止不需要滚动的元素上的`touchmove`事件，以及在需要滚动的元素上使用`position: fixed`和`top`属性，我们可以有效地...
vue解决弹出蒙层滑动穿透问题的方法
10-17
首先，解决滑动穿透的问题需要明确两个目标：一是在蒙层的空白处阻止滑动事件的穿透；二是保证蒙层中间文字内容在文字过多时能够正常上下滑动。 在实现思路方面，开发者尝试了多种方法。第一种方法是使用Vue提供的@...
vue中移动端禁止页面滚动
01-20
vue中移动端禁止页面滑动穿透 1 通过样式 // 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')...
vue/原生解决弹窗防穿透问题
shengPhs的博客
04-22 1214
1.vue弹窗不超出屏幕：可以使用vue自带的@touchmove.prevent阻止滑动，但是这个方法会对其内的子元素的滑动事件也禁止掉，防止子元素的滑动事件被禁止掉，可以使用@touchmove.self.prevent。这样就只禁止自身的活动事件。 2.原生/vue弹窗超出屏幕： 弹窗的时候动态获取weindow滚动的位置记录下来，然后把div变成固定位，left为0，top等于记录位置的负...
iOS禁用右滑返回的两种方法
08-27
主要为大家详细介绍了iOS禁用右滑返回的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端vue项目解决遮罩层滚动穿透问题
Chelle1110的博客
08-30 9284
网上有好几种方法，对于我来说，常用的就两种， 1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加  ：@touchmove.prevent   2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动 （1）在html文件添加如下代码 &lt;script type="text/javascript"&gt; //解决遮罩层滚动穿透问题，分别在遮...
阻止移动端 弹层 touchmove 底层的 html overflow 的元素也跟随移动
palmer_kai的博客
11-10 1735
AphorismAll I ever wanted was a single thing worth fighting for.阻止移动端 弹层 touchmove 底层的 html overflow 的元素也跟随移动两种方案： 直接阻止 元素touchmove 默认行为 在弹层出现的时候， html overflow:hidden;(这个是在弹层元素需要 overflow：auto时候使用) <!
移动端弹出层滑动，导致底层body滑动（阻止touchmove事件冒泡？）
weixin_42661283的博客
04-15 3602
事件冒泡？移动端如何阻止触摸滑动事件冒泡，一个节点可滑动而不影响body节点的滑动 准确的说：应该是锁定背景滚动 描述：原body内容的高度已经超过了手机屏的可视区域的好几倍了，这时候点击某个按钮，出现一个弹出层，固定定位在底部，有一定的高度，超过高度内容可滚动，当滚动到底部时，或者内容并没有高过弹出层的高度，向上或向下都会给原本body里的内容产生滚动，这并不是我们想要的效...
vue阻止触摸事件滚动穿透事件方法
可爱滴菜鸟
04-15 1508
触摸事件透过蒙层,改变了父组件的滚动条位置,添加这个就可阻止这一事件 @touchmove.prevent
如何解决移动端击穿（穿透）问题
szy1000的专栏
10-24 1203
在移动端开发的时候，我们有时候会遇到这样一个bug：点击关闭遮罩层的时候，遮罩层下面的带有点击的元素也会被触发，给人一种击穿了页面的感觉，这是为什么呢？ 为了让大家更直观的看到效果，我复现了bug,并录制了一个gif。供大家参考： 点击“打开弹框”按钮，显示遮罩层 点击“关闭弹框”按钮，遮罩层消失，底下的连接被触发 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img...
vue之移动端滑动穿透问题
fengkui347235的博客
08-15 1511
写这篇博客的只是为了记录项目中遇到的问题，希望能帮助自己和遇到同样问题的小伙伴，话不多说，直接上代码就完事啦！ 一，css代码 //在弹出层显示时要给body加上fixed，使其失去滚动功能，同时会丢失原有的滚动位置，所有要先把此时body的滚动位置记录下来 body.mask-open{ position: fixed; width: 100%; } 二，js代码 当弹层弹出时要记录下...
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
男神的专栏
02-29 3682
这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
vue移动端页面无限滚动代码
03-31
以及移动端滑动流畅性优化。需要确保代码示例中的这些细节都被涵盖。 最后，验证示例代码是否正确，比如使用vue-infinite-loading的话，要展示基本用法，包括安装、引入组件、配置动作和方法。同时提醒用户根据实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值