vue设置遮罩层 怎么防止底层滚动

<template>
<div>
<div id="contain" :class="showBanner?'active':''">
<div class="head center">
<p class="bigtitle blue">冠品小传</p>
<p class="sub">冠品中国成立于1999年，是工业流体设备智能集成服务商， 也是工业涂装领域电商的领先厂商。</p>
</div>
</div>
<!--轮播弹层-->
<div class="mask" v-if="showBanner"></div>
<div v-if="showBanner" class="slider" style="width:640px;hieght:1000px; margin:100px auto;">
<el-carousel :interval="3000" indicator-position="outside" loop="true" arrow="never" height="960px">
<el-carousel-item v-for="item in piclist" :key="item.id" class="slider-imgBox">
<img class="slider_img" :src="item.imgurl">
</el-carousel-item>
</el-carousel>
<div class="button" @click="handleClick">
<!-- <image class="close" src="/static/close3.png"
lazy-load></image> -->
<span>关闭</span>
</div>
</div>
</div>
</template>
<script>
import banner1 from '../assets/1.png'
import banner2 from '../assets/2.png'
export default{
data(){
return {
showBanner:true,
piclist:[
{id:1,imgurl:banner1},
{id:2,imgurl:banner2}
]
}
},
watch:{
},
mounted(){
this.closeMask()
},
methods:{
handleClick(){
this.showBanner = false;
},
closeMask(){
let that = this;
setTimeout(()=>{
that.showBanner = false
},6000)
}
}
}
</script>
、、、
##css：
.active{
overflow: hidden;
height:100vh!important;
}
复制代码