移动端滚动穿透

闲着没事记录下移动端之前遇到的问题。
问题描述：页面长度超出手机屏幕出现滚动条，此时如果有弹层显示的话，触摸弹层，下面列表继续滑动，这个效果肯定是不对的。
解决办法有两个：
方法一：
当弹层出现的时候给其父元素增加overflow: hidden;
当弹层消失的时候删除其父元素overflow属性或更改为overflow: auto;
代码如下

<template>
  <div id="app" :class="{ 'hidden': showFlag }">
        <div class="Channel">
          <div>
            <button @click="showClick">点击显示弹层</button>
          </div>
          <div class="clearfix">
            <span class="fl ChannelSpan">频道</span>
            <span class="fr ChannelLookAll">查看全部</span>
          </div>
          <div>
            <p v-for ="item in list" class="Ptext">{{item}}</p>
          </div>
        </div>
      <div class="dialog" v-show="showFlag">
          <span @click="colse">关闭</span>
          <div class="dialogCenter">
              弹层
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list :[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],
      showFlag:false
    }
  },
  computed:{
  },
  methods:{
    showClick(){
      this.showFlag = true;
    },
    colse(){
      this.showFlag=false;
    }
  }
}
</script>

<style>
#app {v
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
	.tabList {
		display: flex;
		justify-content: center;
		border-top: 5px solid #B8B8B8;
		border-bottom: 5px solid #B8B8B8;
	}
	.tabBtn{
		flex: 1;
		text-align: center;
		margin: 11px 20px;
		
	}
	.tabList>a{
		flex:1;
		list-style:none;
	}
	.tabicon{
		display: inline-block;
		width: 32px;
		height: 32px;
		margin-bottom: 10px;
	}
	.tabP{
		font-size: 12px;
	}
  	
	.ChannelSpan,
	.ChannelLookAll {
		font-size: 14px;
		color: #424242;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.ChannelSpan {
		margin-left: 17px;
	}
	
	.ChannelLookAll {
		margin-right: 17px;
	}
  .Ptext{
    line-height: 20px;
    text-align: center;
    color:#ffffff;
    line-height: 20px;
    border-bottom: 1px solid #ffffff;
    background: blue
  }
  .dialog{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
  }
  .dialogCenter{
    display:inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background:chocolate;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%)
  }
</style>

方法二：
直接使用element-ui 中dialog组件即可

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>