解决移动端vue项目当弹出弹窗时，弹窗蒙层下的页面仍然可以滑动问题

最新推荐文章于 2023-01-29 17:26:33 发布
最新推荐文章于 2023-01-29 17:26:33 发布
阅读量1.1k 收藏
点赞数
分类专栏： VUE项目开发 文章标签： vue android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kairry_/article/details/106077243
版权

问题：
移动端vue项目，当弹窗出现时，弹窗下的蒙层下面的页面仍然可以滑动

解决方案：
在弹窗最外层的div标签上加上 @touchmove.prevent
在这里插入图片描述
这样就ok了

ps：安卓机自带浏览器、QQ、微信、企业微信亲测有效(仅供参考)
来个ios的bro说下效果，看下是不是也ok

kairrys
关注
专栏目录
微信小程序 —— 解决自定义弹窗出现后，蒙层下的页面仍可以滚动的问题
Wu_shuxuan的博客
11-30 1万+
在微信小程序开发中，会碰到自定义弹窗出现后，蒙层下面的页面仍可以滚动的问题。例如： 解决方法：1. 先点击出现蒙层时，页面的最外层view：height:100vh （灵活设置，蒙层出现时height:100vh;,反之height: ;）2. 在蒙层的最外层view中加入catchtouchmove=”preventTouchMove” -wxml <view class="Montmor
完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题
hahahhahahahha123456的博客
08-07 1655
在main.js中设置全局函数： //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 } //弹出框可以滑动 Vue.prototype.canScroll
vue解决弹出蒙层滑动穿透问题的方法
10-17
主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决在vue中，自用mask模态框出来后，下层的元素依旧可以滑动的问题
weixin_30664539的博客
05-28 407
移动端可在mask的元素上加上 @touchmove.prevent，即可阻止下层元素滑动的问题； PC端可将最外成的mask使用position:fixed来实现。 转载于:https://www.cnblogs.com/chenzhengyang/p/10935165.html...
vue 解决移动端弹窗蒙版后可以滑动的问题
weixin_47433173的博客
04-29 449
在蒙版层加上：@touchmove.prevent 阻止触发滚动，就可以啦 //蒙版 <div class="mark" @touchmove.prevent></div>
vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)
Hassan的小博客!
05-16 1万+
vue项目中禁止页面滚动 / 滚动事件穿透移动端解决方案PC端解决方案 vue项目中弹出层时，蒙版下还可以滚动页面。 移动端解决方案 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端解决方案 弹层显示时调用 stopMove()停止页面滚动 ，弹层消失...
vue中 解决弹窗出现之后背景滚动（移动端 ）
zpcqdkf的博客
03-19 1985
watch: { show(v) { this.toggleContainerTouchAction(v) if (v) { document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true }) } else { ...
[vue] -- 使用自定义指令解决部分ios系统无法直接使用overflow：hidden解决弹出弹窗遮罩时滚动穿透的问题
杜
07-12 687
dialog滚动条滑动当前页面影响到底层页面的滑动，网上的解决思路大多是，添加overflow：hidden。但是无论怎么修改，都无法适配。怀疑人生。 后来换了一种思路，发现部分ios系统不适用于此方案。 于是通过全局自定义指令v-fixed，来解决这个问题。 即：使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性 import Vue from 'vue' Vue.directive('fixed', { inse
vue弹出层滑动禁止背景跟着滑动_解决：vue 弹窗滑动 底部页面跟着滑动
weixin_42522045的博客
01-30 1744
解决：在弹窗的外层div上添加时间 @touchmove.prevent即可但是这种方法会导致弹窗无法滚动经测试：此方法只适用弹窗不需要滚动的情况若想弹窗滚动，1.这里使用了vant的弹窗组件，能解决弹窗滚动问题 但是在ios手机上 斜着滑蒙罩层 还是会导致低层页面滚动2.这里想到一个稍微巧妙点的想法： 因为弹窗需要滚动 干脆就把弹窗的最大高度设置为90% 这样用户基本不会点到蒙罩层1.2.结合...
vue移动端弹起蒙层滑动禁止底部滑动操作
10-15
在Vue移动端开发中，有时我们需要实现一个功能：当弹出蒙层时，阻止底部内容的滑动，以确保用户在与蒙层交互时不会意外触发底层页面的操作。这个功能对于提高用户体验至关重要，尤其是在进行表单填写或者选项选择等...
vue 移动端 全屏幕弹窗公共组件
郝峰vip的博客
12-23 739
前沿 这个组件是笔者自己做笔记使用的，方便以后开发。 就是有一个大的黑色的遮罩层，然后在有弹窗内容 step 一 首先在components文件夹下新建一个文件夹，里边包含有这个公共组件所需的文件，img,index.js,index.vue 首先来看看index.vue <template> <transition name="fade"> &lt...
vue弹出层滑动禁止背景跟着滑动_vue 移动端 弹框出现，背景禁止滑动
weixin_39559079的博客
12-21 651
1- 由于弹框比较长，所以弹出的时候前面的弹框内容需要滑动，但是背景需要禁止滚动2-所以使用watch 监听，弹窗出现禁止滚动，弹框消失可以滚动`//首先显示模态框// 教练详细信息分享卡片ShowCoachCard (res) {this.coachCard = true;}然后监听，当模态框弹出的时候就控制watch: {coachCard (newVal, oldVal) {if (new...
移动端弹出层弹出 body还能滚动（滚动穿透）
邓波的博客
09-21 8721
引用bootstrap的dialog组件，不过在移动端，dialog弹出，body还能滚动。 document.addEventListener('touchmove', function (event) { //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动 if ($(".modal").css('display')=="block") {
vue手机端自定义弹框，并设置背景不能滚动
Fansr_的博客
01-11 910
效果图 这里我封装了一个组件，便于不同地方、不同场景调用 <template> <section class="wmassageMask" @touchmove.prevent> <div class="messageMaskContent" ref="msk"> <div class="title"> <h1 style="color: #fff">{{ showTitle...
vue-解决弹出蒙层滑动穿透问题（IOS穿透）
hahahhahahahha123456的博客
08-07 1582
【实现思路】 　　1. vue提供的@touchmove.prevent可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用@touchmove.prevent实现是一个很好的方法。 　　2. 蒙层设为fixed悬浮在最上，底部列表设置overflow-y: hidden；这样可以列表内容就不可以滑了，但实际过程中没有效果，于是想到继续往列表父div向上追溯，对body和html标签设置相关样式，这样就控制住了底部列表滑动问题...
Vue 弹出层时 解决页面滑动问题
jack__love的博客
12-29 2087
使用vue框架构建弹出层时，滑动弹出层，弹出层下面的主页面滑动问题 解决办法在vue created阶段的时候，加上如下代码防止页面滑动 var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false)...
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
热门推荐
qq_43807473的博客
05-10 2万+
uniapp uview使用u-popup组件当开启遮罩层禁止下层页面跟着滚动。 uniapp 弹框禁止页面上下滚动
vue做一个动态活动的弹框，可以在当前屏幕滑动到任何位置
beichen3997的博客
11-12 626
打开时 关闭时 <template> <div id="rec" @mousedown="drag($event)" @click="showList" ref="rec" class="addClass" style="position:fixed;right: 100px;top: 100px; width: 80px;height: 54px; border...
弹框滑动带动底层页面滑动的解决方案
最新发布
MSITC的博客
01-29 606
处理弹框滑动带动底层页面的滚动问题
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值