在vue中禁止屏幕滚动，禁止屏幕滑动

  • Z时代
  • 2024-01-10
  • 分类：综合

vue


 <div class="black-background" @click="handleClone"  v-if="flag" @touchmove.prevent @mousewheel.prevent></div>
handleClone(){
　　this.flag = false;
},
.black-background{
　　position: fixed;
　　top: 0;
　　left: 0;　　
　　bottom: 0;
　　right: 0;
　　z-index: 1;
　　width: 100%;
　　height: 100%;
　　background-color: rgba(0, 0, 0, 0.7);
　　z-index: 200;
}
原理：
首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。
@touchmove 是触摸移动事件
@mousewheel 是鼠标滚轮事件
而加了prevent事件后缀，相信大家都知道是阻止默认事件。
当组件在屏幕最上方显示时，触摸移动事件和鼠标滚轮都被阻止了，所以页面不会再滚动。
　　

以上是 在vue中禁止屏幕滚动，禁止屏幕滑动 的全部内容， 来源链接： utcz.com/z/377745.html

回到顶部