在在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);
这里就不说了，网上有很多，我也没用上，所以没有验证，如果是传统页面的，可以使用一下这种方法。
评论0