app中禁止蒙层后面的内容滚动方法

在app的某一个页面要弹出一个蒙层这种情况是很常见的场景，但是我们经常会碰到这样的情况，当出现蒙层的时候，蒙层下面的内容还是可以上下滚动。
以下是关于这种情况的解决方法，亲测ios和android都有效。

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.returnValue = false;
}

function preventDefaultForScrollKeys(e) {
    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = {37: 1, 38: 1, 39: 1, 40: 1};

    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
    if (window.addEventListener) { // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove  = preventDefault; // mobile
    document.onkeydown  = preventDefaultForScrollKeys;
}

在出现蒙层的时候调用disableScroll方法即可解决，但是在部分android机中还是能出现上下滚动情况。这时候我们需要对蒙层这个dom对象进行处理：

1
2
3

dom.addEventListener("touchmove", function (e) {
    e.preventDefault();
}, false);

完成这一步基本上所有的机型都会生效。

如果想让蒙层后面的内容上下滚动，调用下面的方法即可：

function enableScroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.ontouchmove = null;
    document.onkeydown = null;
}

另外一种情况是连续点击蒙层的时候后面的内容区域也会上下滚动，我的一种解决方法是在蒙层的dom对象上禁止连续多次点击：

dom.addEventListener("click", function(e) {
    if (e.detail > 1) {
        return false;
    }
}, false);