js禁止页面滚动和恢复页面滚动（移动端H5页面）

转载自：https://www.jianshu.com/p/25ac84a839bc

好用！！！

(function (root) {
    var isOn = false;
    var scrollTop;

    /**
     * 禁止页面滚动
     * 不会改动滚动条位置
     */
    function on() {
        if (isOn) {
            return;
        }

        // 特殊标识，表明开启页面滚动禁用，设置了top值，不执行scroll事件
        window.isScrollingByNoscroll = true;

        var doc = document.documentElement;
        scrollTop = window.pageYOffset;
        doc.style.position = 'fixed';
        doc.style.top = -scrollTop + 'px';
        doc.style.left = 0;
        doc.style.right = 0;

        // 当数据较少页面高度有限时，可能出现弹层被截断，故注释掉overflow，暂未发现有什么影响
        // doc.style.overflow = 'hidden';
        isOn = true;
    }

    /**
     * 恢复页面滚动
     * 会自动恢复之前的滚动条位置
     */
    function off() {
        if (!isOn) {
            return;
        }
        window.isScrollingByNoscroll = false;
        var doc = document.documentElement;
        doc.style.position = '';
        doc.style.top = '';
        doc.style.overflow = '';
        window.scroll(0, scrollTop);
        isOn = false;
    }

    /**
     * 判断当前是否处于禁止滚动状态
     * 例如：当 !noscroll.isActive() 时才允许触发下拉刷新操作
     */
    function isActive() {
        return isOn;
    }

    root.noscroll = {
        on: on,
        off: off,
        isActive: isActive
    };
})(window);