vue 禁止遮罩层下层内容滚动

最新推荐文章于 2025-02-11 17:09:22 发布
最新推荐文章于 2025-02-11 17:09:22 发布
阅读量728 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Me_FF/article/details/131993409
版权
在设置fixed或absolute定位并添加遮罩层时，页面内容仍可能随滚动条移动。文章提出了通过在遮罩层上添加@touchmove.prevent.stop和@wheel.prevent.stop事件来有效阻止下层页面的滚动行为，但提到仅使用@touchmove.prevent可能效果不佳。

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

给页面用fixed absolute 定位加遮罩层的时候，发现页面里的内容会随着鼠标滚轮/手指 滚动，以下是阻止下层页面滚动的方法

给遮罩层加一个取消鼠标滚轮和手指触摸行为的事件

试过只加 @touchmove.prevent 效果不理想

<template>
  <div @touchmove.prevent.stop @wheel.prevent.stop>
  </div>
</template>
uniapp 遮罩层下内容禁止滚动
significant_的博客
02-15 1671
背景的新闻内容仍然可以滚动 （逻辑上应该是遮住的内容就无法滚动了）
解决蒙层底部页面跟随滑动
weixin_44198018的博客
05-21 1158
我们在开发中经常会遇见这样的场景
在vue中实现禁止屏幕滚动,禁止屏幕滑动
12-28
今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法， 代码如下： ... 首先，这个div就是整个遮罩组件的根组件，核心就是d
vue中禁止遮罩底层页面滑动
m0_63666030的博客
01-10 269
链接：https://www.jianshu.com/p/8116edade876。商业转载请联系作者获得授权，非商业转载请注明出处。在点击事件（弹出弹框）时，添加。在点击事件（弹出弹框）时，添加。在隐藏弹框方法中，添加。作者：jing_bao。
vue中禁止页面滚动/滚动事件穿透
qq_42905523的博客
05-11 9692
1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div> 2.PC端 弹层显示时调用 stopMove()停止页面滚动 ，弹层消失时调用 Move()开启页面滚动 在这里插入代码片//停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow='hi
在Vue中禁止页面滚动条的CSS和JavaScript实现
qls5945的博客
06-12 1526
Vue中禁止页面滚动条的CSS和JavaScript实现方法
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 2948
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题
最新发布
qq_45927262的博客
02-11 241
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。
vue 在弹框中滑动会透传到下面的页面解决办法
liuye066的专栏
05-27 1601
VUE中，在一个页面打开弹框，在弹框中上下滑动，下方页面会跟着滑动。 解决办法： 在main.js中加入代码： //弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面
vue中移动端禁止页面滚动
01-20
vue中移动端禁止页面滑动穿透 1 通过样式 // 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')[0].style.cssText = cssStr document.documentElement.style.height = '100%' do
Vue h5移动端实现页面不滚动，里面内容滚动
qq_54146568的博客
05-08 1291
在 Vue.js 中，如果你想禁止整个页面的滚动，但允许某个内部元素进行滚动，你可以通过一些 CSS 和 JavaScript 技巧来实现。最常见的方式是为禁止滚动的部分设置样式，然后为允许滚动的部分设置适当的滚动属性。这里有一个示例，展示了如何禁止整个页面滚动，但允许页面中的某个特定区域进行滚动。
VUE中禁止页面滚动
哦哦一人
06-16 3804
<div @touchmove.prevent> </div> 加上@touchmove.prevent则代表这部分代码禁止滚动滑动 记录一下
vue初始阻止滚动事件
YhWyl527的博客
11-04 508
//停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.style.overflow=‘hidden’; document.addEventListener(“touchmove”,m,{ passive:false });//禁止页面滑动 }, //开启页面滚动 Move(){ let m =function(e){e.preventDefault();}; document.body.style.overf
vue 遮罩层阻止默认滚动事件
Zhooson的博客
11-13 2769
针对vue项目中的操作： vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 &lt;div class="dialog" @touchmove.prevent &gt;&lt;/div&gt; 第二种方法： 需要引入的jq大法。 点击弹出层的click事件...
vue3实现遮罩层外部禁止页面滚动，内部可滚动
赵又又的博客
03-09 6962
直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。 方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen
在vue中禁止屏幕滚动，禁止屏幕滑动
weixin_41033048的博客
10-09 961
有效：https://www.cnblogs.com/fanqiuzhuji/p/12667660.html
Vue 阻止背景滚动
u013611033的博客
04-20 497
<template> <div @touchmove.prevent> <h3 class="main-bk">{{ title }}</h3> <p>您好！{{provider}}：</p> </div> </template>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值