uniapp 遮罩层下内容禁止滚动

最新推荐文章于 2025-03-14 14:27:14 发布
最新推荐文章于 2025-03-14 14:27:14 发布
阅读量1.6k 收藏 12
点赞数 7
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/significant_/article/details/136120236
版权
文章讲述了在使用uniapp开发时，如何通过设置页面body的overflow属性来控制弹出层或遮罩层出现时遮盖内容并禁止其滚动。作者提供了Vue3.0和Vue2版本的解决方案，并鼓励读者在遇到帮助时点赞支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp 设置弹出层后 遮罩层下的内容仍然可以滚动

在这里插入图片描述
背景的新闻内容仍然可以滚动 （逻辑上应该是遮住的内容就无法滚动了）

解决方法 ：弹窗或遮罩层出现时 将页面body属性为overflow即可禁止滚动（禁止点击的实现效果我觉得应该跟这个类似 设置页面不能点击就行）

//显示弹窗
const showDialog=()=>{
   
		show.value=true  //控制弹窗显示
		//核心是下面这句话   这样遮罩层出现
最低0.47元/天 解锁文章
significant_
关注
用uniapp开发项目时为什么你的 Dialog 会导致滚动穿透？一招教你解决!
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-08 393
只需阻止页面滚动：小程序使用，UniApp 使用。需要内部滚动的弹窗：借助page-meta动态控制页面的滚动状态。解决了这个问题后，我再也不用担心用户滑动背景页面时的混乱体验了！dialog滚动穿透解决方案
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
uniapp禁止遮罩层下的页面滚动
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
06-28 795
滚动事件冒泡带来弊端解决
解决uni-app，popup弹起后,页面会滚动的问题
最新发布
路虽远，行则必至！
03-14 273
如果要禁止蒙版下的页面滚动，可使用。
遮罩层内的元素滚动时不让遮罩层底下的元素滚动的办法
qq_39174318的博客
05-21 725
打开遮罩层的时候, 获取body元素的样式, 然后设置position为relative;overflow为hidden;这样页面就不会滚动了, 但是遮罩层可以滚动, 这里是从。知道的, 但是文中说, 如果给body设置了这俩样式属性后, 不管遮罩内的还是遮罩底下的都不会滚动, 但是实际操作发现, 遮罩内的会滚动, 遮罩底下的不会滚动.H5端目录列表的遮罩层在遮挡住文章内容后, 滚动目录列表会引起文章内容的滚动. 想要的效果打开目录列表遮罩层时仅目录列表滚动.
vue 遮罩层阻止默认滚动事件操作
11-20
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=”dialog”></div> 如果不是使用Vue的话，可以给body添加overflow:hidden属性解决 补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动) vue项目中弹出层时，蒙版下还可以滚动页面。 移动端解决方案 在蒙层所在div上加 @touchmove.prevent <div class=”maskBox” @touchmove.p
uniapp 禁止遮罩层下的页面滚动
UserGuan的博客
08-23 1962
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了，虽然在编译器上的滚轮依旧可以滚动，但真机环境下的手指滑动无法再触发。注意：如果使用 uview 之类的 ui 框架，@touchmove.stop.prevent 必须放在底层的 view 上面。
We前端之UniApp禁止遮罩弹窗下的页面滚动
CSDN博客主页地址：https://mengjian.blog.csdn.net/
07-27 2380
We前端之UniApp禁止遮罩弹窗下的页面滚动
uni-app 禁止遮罩层下的页面滚动
学习路上的小刘
08-25 2065
1.需要禁止蒙版下的页面滚动 <view class="mask" @touchmove.stop.prevent="moveHandle"></view> /*这个view 是你的遮罩层*/ moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 在js的方法中添加个空函数moveHandle moveHandle(){} ...
uni-app 在遮罩层禁止下层的滚动和下拉刷新功能（动态设置下拉刷新）
liuye066的专栏
11-30 8706
最近在做一个uni-app的项目，其中有列表页中弹出查询弹窗的功能。列表中有下拉刷新和上拉加载的功能。 遇到的问题有： 1。在弹窗中上下滑动，底层页面也随着滑动 2。在弹窗中下拉时，也会触发下拉刷新功能，上划时，也可能会触发上拉加载功能； 3。在弹窗中的树形列表框加了滚动后，会报错：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progres
如何阻止小程序遮罩层下方图层滚动
10-16
给出的文档内容强调，示例代码提供了详细的学习参考，如果需要深入了解或者在工作中应用相关技术，应该仔细研究文档中的代码示例，这样才能更好地理解和掌握如何在小程序开发中处理遮罩层与下方图层的滚动问题。...
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
uniapp 遮盖层防止下面页面滚动
qq_49644610的博客
07-05 312
uniapp 遮盖层防止下面页面滚动 @touchmove.stop.prevent=“()=>{}”
遮罩层禁止滚动
Doubleu_的博客
03-18 2024
移动端经常遇到弹出层，为了凸显弹出层会加一个遮罩层 例如下图 遮罩层的样式 &lt;div class="mask"&gt;&lt;/div&gt; .mask{ width:100vw; height:100%; background-color:rgba(0,0,0,0.5); position: fixed; top:0; left:0; display:non...
uniapp及微信小程序遮罩层禁止页面滚动
Now_li的博客
11-01 1373
写uniapp时，页面高度溢出遮罩层定位方式实现。但是页面可以滑动 在遮罩页面中加入@touchmove方法实现禁止页面滚动 @touchmove.stop.prevent="moveHandle"
遮罩层下禁止页面滚动
weixin_38169798的博客
09-03 620
// 封装禁止页面滚动方法（该方法兼容PC端和移动端）var topSpace = 0function BodyScroll (isState) { var bodyDoc = document.body if (isState) {topSpace= window.scrollYbodyDoc.style.position = 'fixed'bodyDoc.style...
禁止遮罩层下屏幕滚动
Hao-Z-Y
10-24 1184
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxi
uniapp阻止遮罩层穿透滚动
前端-CV全粘工程师
09-23 720
uniapp 弹窗穿透 阻止弹窗后的列表滚动，阻止遮罩层后的列表滚动，阻止穿透
uniapp 遮罩层
07-29
在UniApp中，你可以使用遮罩层来覆盖在页面上，以达到一些特定的效果，比如弹窗、loading等。以下是一种实现遮罩层的方法： 1. 在你的页面中，可以添加一个 `<view>` 或者 `<div>` 元素作为遮罩层的容器。 2. 为了实现遮罩层的效果，你可以使用 `v-if` 或者 `v-show` 来控制遮罩层的显示和隐藏。比如，你可以在数据中定义一个变量 `showMask`，然后在需要显示遮罩层的时候将其设为 `true`。 3. 在遮罩层容器中添加相应的样式，比如设置背景颜色、透明度等。你可以使用内联样式或者在样式文件中定义相应的类来设置样式。 下面是一个简单的示例代码： ```html <template> <view> <!-- 页面内容 --> <!-- 遮罩层容器 --> <view class="mask" v-if="showMask"></view> </view> </template> <script> export default { data() { return { showMask: false } }, // ... } </script> <style> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色和透明度 */ z-index: 999; /* 设置遮罩层的层级 */ } </style> ``` 在上述示例中，当 `showMask` 的值为 `true` 时，遮罩层会显示出来，覆盖在页面上方，实现了一个简单的遮罩层效果。你可以根据实际需求来调整样式和逻辑。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值