在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事件后綴，相信大家都知道是阻止默認事件。
當組件在屏幕最上方顯示時，觸摸移動事件和鼠標滾輪都被阻止了，所以頁面不會再滾動。