场景： 蒙层上可以滑动 蒙层下的页面没有滚动条（即默认不会出现滑动）
问题描述：在ios手机上 当蒙层上有滑动效果当到底部 或 顶部时 整个网页滑动
解决方法分析：
- 蒙层定位用"absolute "不要用"fixed "不然当整体页面滑动时会发现蒙层不会动（和安卓对比 安卓上页面整体滑动时蒙层会随页面一起滑动）
- 蒙层上的区域分为：（做到触到蒙层就隐藏）
a: 蒙层灰色区域
（1）点击时要隐藏 （2）touchstart时也要隐藏
b: 白色区之不可以滚动区（一般是标题）就禁止默认事件 即滑动这里时不让页面整体滚动 c: 白色区之可以滚动区 当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点就可以了
c: 白色区之可以滚动区 当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点就可以了；
参考链接：https://www.imooc.com/article/254122?block_id=tuijian_wz
解决代码：
### html部分：
<div class="main">
<!-- 班级列表蒙层 -->
<div v-show="isShowClassList" @click.stop="hideClassList($event)" class="action-sheet-mask">
<div class="action-sheet">
<div class="title">
<p>请选择所在班级<span class="icon-close"></span></p>
</div>
<div class="action-sheet-list-wrapper">
<ul v-if="formInfo" class="action-sheet-list">
<li v-for="(item, i) in formInfo.class.field_value" :key="i" @click.stop="cutoverClass(i,item)" :class="curIndex === i ? 'active': ''" class="action-sheet-item">
<p class="text">{{item}}<span class="icon"></span></p>
</li>
</ul>
</div>
</div>
</div>
</div>
### j部分：
mounted () {
// ios手机上 滑动到最顶部或者最底部时 整体页面跟随滑动的问题
var overscroll = function(el) {
el.addEventListener('touchstart', function() {
var top = el.scrollTop,
totalScroll = el.scrollHeight,
currentScroll = top + el.offsetHeight
if (top === 0) {
el.scrollTop = 1
} else if(currentScroll === totalScroll) {
el.scrollTop = top - 1
}
})
}
overscroll(document.querySelector('.action-sheet-list-wrapper'))
// 触到蒙层就隐藏
let self = this
document.querySelector('.action-sheet-mask').addEventListener('touchstart', function(e) {
if (e.target.className === 'action-sheet-mask' || e.target.className === 'icon-close') {
self.isShowClassList = false
}
if (e.target.className !== 'action-sheet-list-wrapper' && e.target.className !== 'action-sheet-list' && e.target.className !== 'action-sheet-item' && e.target.className !== 'text') {
e.preventDefault()
}
})
},
methods: {
// 点击显示班级列表
showClassList () {
this.isShowClassList = true
},
// 点击隐藏班级列表
hideClassList (e) {
if (e.target.className === 'action-sheet-mask' || e.target.className === 'icon-close') {
this.isShowClassList = false
}
},
// 点击切换班级
cutoverClass (i, data) {
this.curIndex = i
this.className = datathis.isShowClassList = false
}
}
### CSS部分 :
.main{
max-width: 7.5rem;
margin:0 auto;
width: 100%;
height: auto;
min-height: 100vh;
background-color: #FFCD63;
background-image: url('../../assets/img/IMG_Sign up@3x.png');
background-size: 100% 3.72rem;
background-position: center 0.6rem;
background-repeat: no-repeat;
position: relative;
}
/* 班级列表蒙层 */
.action-sheet-mask{
max-width: 7.5rem;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
margin-left: -3.75rem;
background: rgba(0,0,0,0.4);
z-index: 101;
}
.action-sheet{
width:7.1rem;
background: #fff;
position: absolute;
left: 50%;
margin-left: -3.55rem;
bottom: 0.2rem;
border-radius: 0.2rem;
padding:0 0.3rem 0;
box-sizing: border-box;
}
.action-sheet .title{
width: 100%;
}
.action-sheet .title p{
width: 100%;
height: 1rem;
line-height: 1rem;
text-align: center;
font-size: 0.3rem;
color: #333;
position: relative;
margin-bottom:0;
}
.action-sheet .title .icon-close{
width: 0.38rem;
height: 0.38rem;
background-image: url('../../assets/img/icon_delete@3x.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top:0.31rem;
right: -0.09rem;
}
.action-sheet-list-wrapper {
width: 100%;
max-height: 5.05rem;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
}
.action-sheet-list-wrapper::-webkit-scrollbar{
display: none;
}
.action-sheet-list{
width:100%;
margin:0;
}
.action-sheet-item{
width: 100%;
border-top:0.01rem solid #deddde;
box-sizing: border-box;
}
.action-sheet-item>p{
height:1.01rem;
line-height: 1rem;
font-size: 0.32rem;
color: #333;
font-weight: 700;
position: relative;
margin-bottom:0;
}
.action-sheet-item>p .icon{
width: 0.38rem;
height: 0.38rem;
background-image: url('../../assets/img/icon_choose@3x.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top:50%;
right: 0;
margin-top: -0.19rem;
display: none;
}
.action-sheet-item.active>p .icon{
display: block;
}
