vue解决遮罩层滚动方法

最新推荐文章于 2023-03-23 10:14:47 发布
最新推荐文章于 2023-03-23 10:14:47 发布
阅读量594 收藏 1
点赞数 1
文章标签： vue 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26642611/article/details/105701521
版权

vue 遮罩层阻止默认滚动事件
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。
vue中提供 @touchmove.prevent 方法可以完美解决这个问题

红孩儿2011
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹出层遮罩层效果(包括居中、不随滚动条滚动)
03-07
弹出层遮罩层效果(包括居中、不随滚动条滚动)
vue解决弹出蒙层滑动穿透问题的方法
10-17
主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3实现遮罩层外部禁止页面滚动，内部可滚动
赵又又的博客
03-09 6156
直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。 方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen
点击按钮生成遮罩层后这个按钮被遮住还可以点击解决办法
weixin_30840573的博客
11-04 1174
这个功能很特殊，我有篇随笔写的自助弹框，弹出框后，下面的按钮虽然有遮罩层但还是可以点，有一种解决方法就是用点击后就马上解绑按钮的点击事件，在弹框确定后再绑定上去。 　　　　　　　　　 $(".regbtn")[0].addEventListener("touchstart",register); function register() { $(".regbtn"...
解决vue h5 遮罩滚动穿透问题
lastone1212的博客
07-04 486
解决vue h5 遮罩滚动穿透问题
vue 遮罩层阻止默认滚动事件操作
11-20
总结一下，Vue 中防止遮罩层下页面滚动的方法主要包括使用事件修饰符 `@touchmove.prevent` 或者通过 CSS 修改 `body` 的 `overflow` 属性。对于移动端和 PC 端，我们可以根据具体需求选择合适的解决方案，以确保在...
vue 弹出遮罩层样式实例
10-15
本篇文章将深入探讨如何在Vue中创建一个全屏的、响应式的遮罩层，并解决在实现过程中可能遇到的问题。 首先，我们要创建一个用于表示遮罩层的Vue组件。在这个组件中，我们可以定义一个名为`popContainer`的CSS类，...
解决移动端fixed遮罩弹窗滚动击穿的vue指令
08-10
解决滚动击穿问题，我们可以创建一个自定义指令（Vue directive），在遮罩层显示时禁用背景的滚动，隐藏时恢复。 在vue-frozen-master项目中，可能包含了一个名为`v-frozen`的自定义指令。这个指令的工作原理可能是...
解决在vue中，自用mask模态框出来后，下层的元素依旧可以滑动的问题
weixin_30664539的博客
05-28 390
移动端可在mask的元素上加上 @touchmove.prevent，即可阻止下层元素滑动的问题； PC端可将最外成的mask使用position:fixed来实现。 转载于:https://www.cnblogs.com/chenzhengyang/p/10935165.html...
解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
spfLinux的博客
02-28 940
opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; 参考链接：点击打开链接...
遮罩层实现以及遮罩层页面禁止滚动的解决方法
艺术编程
12-03 4789
最近需要写一个自定义的弹框，之前的弹框是用的alert()或者confirm()，满足不了需求因此重新写一个自定义的。 写弹框我想到了在写一个遮罩层会使得效果更好，今天在这里做个笔记以后用到的时候方便自己。 遮罩实现的原理： 写一个div定义他的宽高和屏幕相同然后设置他的z-index值使得他位于其他层上面。 详情见下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
vue移动端遮罩层滚动穿透问题
weixin_47813845的博客
08-06 1492
今天小编在做项目的时候发现了一个问题，各种查资料才得以解决。下面来简单介绍一下问题： 在页面中，我们需要点击按钮展示一个遮罩层，且遮罩层里面内容可滚动，但是遮罩层盖住的区域不可滚动，这样一个问题。 搜索之后发现，在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动，但是遮罩层内容也不可以滚动，所以这个方案pass，如果你们遇到不需要遮罩层内容滚动的话，可以采用这样的方法。 下面来介绍下解决方法： 首先我们在data里
页面出现滚动条，导致element-ui的loading遮罩不全
Biligege的博客
03-23 1256
页面出现滚动条，导致element-ui的loading遮罩不全。
Vue出现弹出层时，禁止底部页面跟随滑动
wh_xmy的博客
04-24 8133
背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考： 1.在有弹出框的页面中，加上以下方法，弹出......
v-loading在可变高度元素上使用
bian2021的博客
09-06 1246
v-loading在可变高度元素上使用时，元素出现竖向滚动条时，loading无法全覆盖此时可用v-loading.body指令即可
v-loading.fullscreen.lock
weixin_48371382的博客
03-21 2664
解意 fullscreen：全屏 lock：锁定 实现效果 当加载时全屏幕锁定，不可触发任何事件、即使在有滚动条的情况下滚动事件同样禁止
Vue页面无法竖向滚动导致显示不全
Slay__的博客
10-03 2708
VUE页面无法竖向滚动 在当前页面的最外层div标签中设置样式 .fragment-container{ height: 100vh; overflow-y: scroll; max-width: 100vw; margin: 0 auto; }
vue3的项目中遮罩层去掉滚动条
最新发布
06-02
在Vue3的项目中，可以通过以下步骤去掉遮罩层下方的滚动条： 1. 在遮罩层的样式中，设置`position: fixed`和`overflow-y: scroll`，例如： ```css .mask { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 999; overflow-y: scroll; } ``` 2. 在需要显示遮罩层的组件中，使用Vue的`computed`属性计算出一个布尔值，用来判断是否需要显示遮罩层，例如： ```html <template> <div> <button @click="showMask = true">显示遮罩层</button> <div v-if="showMask" class="mask"></div> </div> </template> <script> export default { data() { return { showMask: false, }; }, computed: { bodyStyle() { return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' }; }, }, }; </script> <style> body { height: 100%; } </style> ``` 3. 在组件的`<body>`元素上绑定样式，根据是否显示遮罩层来决定是否隐藏滚动条，例如： ```html <template> <div> <button @click="showMask = true">显示遮罩层</button> <div v-if="showMask" class="mask"></div> </div> </template> <script> export default { data() { return { showMask: false, }; }, computed: { bodyStyle() { return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' }; }, }, mounted() { Object.assign(document.body.style, this.bodyStyle); }, updated() { Object.assign(document.body.style, this.bodyStyle); }, }; </script> <style> body { height: 100%; } </style> ``` 这样就可以在Vue3的项目中去掉遮罩层下方的滚动条了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值