vue开发H5，遮罩层下方内容禁止滑动（滚动）

最新推荐文章于 2024-07-25 10:18:50 发布
最新推荐文章于 2024-07-25 10:18:50 发布
阅读量5.9k 收藏 2
点赞数 3
分类专栏： vue 文章标签： vue遮罩层下方内容禁止滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42817227/article/details/88660058
版权

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

解决办法，直接在遮罩层所在的div加上“ @touchmove.prevent ” 即可

<div @touchmove.prevent>这是遮罩层的div</div>
初心-LIUSHOP
关注
专栏目录
活跃标签遮挡问题（已解决iOS滚动兼容问题）
Victor20190424的博客
04-28 444
1、问题描述 当我们制作标签的交互效果时，经常会遇到点击后活跃标签被遮挡的问题，这时需要将活跃标签展示出来。有同学可能用过 scrollIntoView() 这个方法，可以直接将被遮挡的元素展示出来，但这个方法谁用谁知道，坑实在太多了（比如可能带动外层容器上下滚动，并且存在一些iOS兼容性问题）。所以这里手动实现了一下 ...
移动端vue项目解决遮罩层滚动穿透问题
weixin_42552058的博客
11-28 1356
三种穿透滑动情况以及解决办法 1.引用mintui中mt-popup下拉选择框选择内容时，滑动穿透问题 （1）如果下拉选择内容过少，mt-popup内部不需要滑动： 就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件 <mt-popup v-model="popupVisible" position="bo...
vue 禁止遮罩层下层内容滚动
米六的博客
07-29 631
定位加遮罩层的时候，发现页面里的内容会随着鼠标滚轮/手指 滚动，以下是阻止下层页面滚动的方法。给遮罩层加一个取消鼠标滚轮和手指触摸行为的事件。
H5遮罩层 直接拿着就可以用
qq_44759522的博客
07-18 109
【代码】H5遮罩层 直接拿着就可以用。
vue遮罩阻止页面滚动行为的最佳实践（兼容IOS）
最新发布
weixin_43372726的博客
07-25 239
针对body标签使用overflow:hidden对IOS端不生效的问题
移动端弹出遮罩层时防止底部页面滚动
asing1elife's blog
09-14 2192
移动端弹出遮罩层时防止底部页面滚动 如果底部页面内容过多出现滚动条，此时弹出遮罩层后，在遮罩层滑动页面也会导致底部页面响应滚动操作 更多精彩 更多技术博客，请移步 asing1elife’s blog 解决办法 监听遮罩层的打开和关闭 打开时设置底部页面的 position: fixed 关闭时恢复默认布局 position: static watch: { ...
解决支付宝小程序uview组件u-popup遮罩滚动穿透问题
StayInCat的博客
04-19 4716
uni-app、u-popup、遮罩滚动穿透
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
在Vue.js中，有时我们需要在特定情况下禁止用户对页面的滚动操作，比如在展示全屏内容或弹出层时。本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止...
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
10-17
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
weixin_42188512的博客
01-13 3656
一、需求描述有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。image.pngimage.png二、方法：1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。三、上代码这...
uniapp禁止遮罩层下的页面滚动
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
06-28 726
滚动事件冒泡带来弊端解决
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法...
weixin_30677073的博客
07-27 998
一. 运行环境： iphone所有机型的qq浏览器，safari浏览器，微信内置浏览器（qq浏览器内核）等。 二. 异常现象： 1. 大幅度上下滑动h5页面，然后停止滑动，有时候会影响到页面滚动，如局部滚动条； 2. 大幅度上下滑动h5页面，页面中的悬浮层，如头部，底部菜单之类需要固定在指定位置的层不会随着挣个界面滑动；如果对前端的定位方式不太熟练的话，甚至会出现悬浮层的框架与内容相分离的...
关于ios端h5页面双击会页面发生滚动的解决办法。
weixin_44777146的博客
08-25 1282
最近在公司在开发h5的页面，本猿在ios上测试时发现了，打开弹出框遮罩层的时候，在监听触摸事件的时候禁止了默认事件和冒泡事件，虽然页面不能够滚动了，但又奇怪的发现一个问题，双击的话页面还是能够滚动的。然后在网上扒了一下解决方法，亲测可以使用。 let agent = navigator.userAgent.toLowerCase(); let iLastTouch = null; if (agent.indexOf('iphone') >= 0 || agent.indexOf('ip
js禁止苹果页面底部滚动_web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动...
weixin_39849239的博客
12-24 433
场景概述弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。那么，如何阻止呢？请看以下分析：方案分析方案一打开蒙层时，给body添加样式：overflow: hidden;height: 100%;在某些机型下，你可能还...
uniapp h5 页面在移动端 遮罩层禁止滚动 --安卓和ios端完美适配（只是测试了部分机型）
凉城玖的博客
11-06 1089
使用unipp 写h5 页面，在移动端，禁止 遮罩层 出现 滚动问题。 直接在标签上面写上这个就可以了 @touchmove.stop.prevent="moveHandle" ，然后编写一个对应空的事件即可。 一般的 小程序 遮罩层禁止滚动可以直接在标签上面设置： catchtouchmove 即可 ...
ios机型下，滚动有遮罩层的弹框， 会触发底部页面的滚动事件
yezi_Z的博客
08-20 1845
问题描述： 被遮挡的页面是一个有滚动条的页面。覆盖在上方的是一个有遮罩层的弹框。弹框内部存在滚动条。 在ios机型下，当不做任何处理时，点击遮罩层对应的位置，会触发被遮挡页面的click操作。并且弹框内部无法进行正确的滚动，而是直接触发了被遮挡页面的滚动操作。 解决方案： 如果不介意滑动遮罩层，仍可以滚动被遮挡页面。处理方式相对比较简单, 可以直接在遮罩层上阻止touchmove操作的冒...
关于ios手机嵌套h5页面滚动兼容问题解决
Zzl1804的博客
03-30 1985
1. 使用绝对定位 滚动元素使用绝对定位 { position:absolute; top:0; left:0; bottom:0; height:100vh; overflow-y:srcoll; } 2. 添加兼容样式 { -webkit-overflow-scrolling: touch; } 3. iframe 当嵌套了iframe时,经常遇到iframe无法滚动,可以将引用的html样式高度设置为100vh,让其内部滚动 总结 以上方法不一定100%可以解决,如无法解决可以尝试j
vue解决遮罩层滚动方法
qq_26642611的博客
04-23 623
vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题
Vue 有弹出层时 ，禁止页面滑动
weixin_33755554的博客
02-13 1104
/***阻止滚动限制***/ stop(){ 　　var mo=function(e){passive: false ;}; 　　document.body.style.overflow='hidden'; 　　document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, ...
Vue中iframe拖拽卡顿问题解决方案：透明遮罩层优化
- 如果遮罩层和iframe的内容之间存在复杂的交互，可以考虑使用`requestAnimationFrame`来平滑地更新iframe大小，或者利用`Intersection Observer`来检测遮罩层是否覆盖了iframe，以此来决定是否加载iframe内容。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值