页面滑动穿透的成熟解决方案

认真写好每一篇，愉悦自己，也方便他人
这个玩意让人头疼，估计前端面试的话，问的几率挺大的

方案一：自己写代码控制推荐

    //打开模态框前调用
    function fixedBody() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
    }

    //关闭模态框后调用
    function looseBody() {
        var body = document.body;
        body.style.position = 'static';
        var top = body.style.top;
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
        body.style.top = '';
    }
 

第二套

//禁止滚动条滚动
function unScroll() {
    var top = $(document).scrollTop();
    $(document).on('scroll.unable',function (e) {
        $(document).scrollTop(top);
    })
}
//移除禁止滚动条滚动
function removeUnScroll() {
    $(document).unbind("scroll.unable");
}

方案二：第三方解决方案

不要以为第三方方案就是最好的，该插件目前已很久没维护

github搜：body-scroll-lock

方案三：第三方解决方案之使用第三方的滚动条插件，可以避免

不是特别建议，因为页面滑动明显有卡顿效果

第一款
github搜：OverlayScrollbars
第二款：
github搜：better-scroll
better-scroll是基于iScroll继续更新维护两个使用方法是一样的,区别是iScroll已经不更新了