完美解决js 禁止滚动条滚动，并且滚动条不消失，页面大小不闪动

当前的项目遇到了这个问题，

当打开dialog的时候，希望主页面的滚动条不要滚动。

一番搜索之后，发现大家的解决办法分为两种。

第一种

就是隐藏滚动条，但是这样的话，前台页面会因为滚动条的隐藏和出现而发生宽度的变化。

这就使得每次一打开dialog页面就会伸缩。十分难受。

第二种

就是不知道从哪儿抄的这种方法。

//禁止滚动条滚动

function unScroll() {

    var top = $(document).scrollTop();

    $(document).on('scroll.unable',function (e) {

        $(document).scrollTop(top);

    })

}

//移除禁止滚动条滚动

function removeUnScroll() {

    $(document).unbind("scroll.unable");

}

一番修改之后，我也没好用。

最后 终于在外网找到个完美解决方案。

var winX = null;
var winY = null;

window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});

function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
}

function enableWindowScroll() {
    winX = null;
    winY = null;
}

根据需求自行修改。

*（在scrollTo方法中，最好加上behavior:'instant'属性。）

例：

window.scrollTo({top:winY,behavior:'instant'});

就可以完美解决js 禁用滚动条的问题啦。