移动端蒙层下禁止滚动条滚动

蒙层弹窗禁止滚动条滚动

1. 1. dom 元素 阴影蒙层的布局显示
2. 2. 获取dom 实现js 利用阻止默认事件
3. 处理兼容性 分别用 scroll 和touchmove 事件来判断

.boxCount{
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    background-color:rgba(0,0,0,0.5);
    display: none;
}
.boxFrame{
    width: 256px;
    height: 140px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -70px;
    margin-left: -128px;
}

``` 
function bodyScroll (e) {
    e.preventDefault()
}
function isIOS() {
    var u = navigator.userAgent
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
    return isiOS
}
```
```//由于ios和安卓不兼容 所有进行分别判断
if (isIOS()) {
    document.body.addEventListener('touchmove', bodyScroll, {passive: false})
} else {
    document.body.addEventListener('scroll', bodyScroll, false)
}
```
```//点击按钮取消
imgIcon.onclick = function () {

    if (isIOS()) {
        document.body.removeEventListener('touchmove', bodyScroll, false)
    } else {
        document.body.removeEventListener('scroll', bodyScroll, false)
    }
}

或用css 样式看来控制实现，利用滚动时top值 不变 做到定位效果

在弹窗打开的时候给body的全局滚动设置position:fixed属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透，但是原来的位置丢失了。所以再给body设置fixed属性的时候，要把当前的滚动位置赋值给css的top属性，那在视觉上就没有任何变化了 弹窗关闭的时候则要清除fixed固定定位和top值；并设置其滚动位置位置top值，则又恢复了滚动功能，而且视觉上没有任何变化

fixedBody () { 
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;' 
}
looseBody () { 
let body = document.body body.style.position = '' let top = body.style.top document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top) body.style.top = '' 
}