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;
    }
复制代码

转载于:https://juejin.im/post/5cc106a85188252c3314b556