在ios手机上 当蒙层上有滑动效果当到底部 或 顶部时 整个网页滑动

场景： 蒙层上可以滑动 蒙层下的页面没有滚动条（即默认不会出现滑动）

问题描述：在ios手机上 当蒙层上有滑动效果当到底部 或 顶部时 整个网页滑动

解决方法分析：

1. 蒙层定位用"absolute "不要用"fixed "不然当整体页面滑动时会发现蒙层不会动（和安卓对比 安卓上页面整体滑动时蒙层会随页面一起滑动）
2. 蒙层上的区域分为：（做到触到蒙层就隐藏）
   a: 蒙层灰色区域
   （1）点击时要隐藏 （2）touchstart时也要隐藏
   b: 白色区之不可以滚动区（一般是标题）就禁止默认事件 即滑动这里时不让页面整体滚动 c: 白色区之可以滚动区 当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点就可以了
   c: 白色区之可以滚动区 当滚动区滚到顶部时，手再触屏时，把把div的滚动位置向下调一点点，这样系统就会以为还没有滚到头，就会继续滑动，然后是div内的阻尼滑动，整个网页不会滑动。滚动到底部时，再触屏时，同理向上调一点就可以了；

参考链接：https://www.imooc.com/article/254122?block_id=tuijian_wz

解决代码：

### html部分：

     

        
        

            

                

                    
请选择所在班级
                
                

                    

                        

                            
{{item}}
                        
                    
                
        
    

### 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 [email protected]');
    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/[email protected]');
    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/[email protected]');
    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;
}