vue 遮罩層 - 禁止滾動事件
阿新 • • 發佈:2018-11-09
頁面上有遮罩層,但是下面頁面過長,不允許頁面滑動~
解決:@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>