在vue中实现禁止屏幕滚动,禁止屏幕滑动_vue禁止页面上下滚动,vue禁止滑动 - CSDN文库

5星 · 超过95%的资源 136 浏览量更新于2023-03-16 评论收藏 95KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

在在vue中实现禁止屏幕滚动中实现禁止屏幕滚动,禁止屏幕滑动禁止屏幕滑动

主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小

编过来看看吧

今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果：

其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。

作为自己开发的一个常用的组件，这种bug当然是要解决的。

于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法，

代码如下：

<div class="magnify" v-show="isShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent>

...

</div>

首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。

@touchmove 是触摸移动事件是触摸移动事件

@mousewheel 是鼠标滚轮事件是鼠标滚轮事件

而加了prevent事件后缀，相信大家都知道是阻止默认事件。

当组件在屏幕最上方显示时，触摸移动事件和鼠标滚轮都被阻止了，所以页面不会再滚动。

在网上也看到了很多给在网上也看到了很多给body添加事件的解决方法：添加事件的解决方法：

function bodyScroll(event){

event.preventDefault();

}

document.body.addEventListener('touchmove',bodyScroll,false);

这里就不说了，网上有很多，我也没用上，所以没有验证，如果是传统页面的，可以使用一下这种方法。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论10

章满莫

2023-06-14

通过这篇文章中介绍的简单步骤，让我们在 Vue 中禁止屏幕滑动变得异常简单！

weixin_38562626

粉丝: 3
资源: 937

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈