1. 程式人生 > >vue 遮罩層 - 禁止滾動事件

vue 遮罩層 - 禁止滾動事件

頁面上有遮罩層,但是下面頁面過長,不允許頁面滑動~

解決:@touchmove.prevent

移動端專案需要在首頁做一個彈出的遮罩層,上面是活動樣式,就是下面左邊的樣子

但是首頁內容過長,遮罩層css寫了position:absolute ,100%的寬高之後,滾動後會內容部分不在遮罩層下面.....醜樣子如下

           

遮罩層css,如下,將position:absolute改成fixed

這樣在pc端測試的時候,滾輪滾動,下面樣式滾動,遮罩層依然最上方,不會出現右邊的情況

當前有的解決辦法是直接禁止滑鼠的滾動事件,這樣肯定是更好,但是我的是移動端專案~主要解決手機上下滑動事件就行了~

改變css這個方法純屬是為了瀏覽器測試的時候更好看一點~

.activityCover{
    position: fixed;
    /*position: absolute;*/
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    z-index:99;
}
@touchmove阻止遮罩層預設滾動事件
<div class="activityCover" v-if="activityShow" @touchmove.prevent ></div>