bootstrap在使用弹出框由于滚动条隐藏造成网页抖动或移动的解决办法

bootstrap引用bootstrap.min.js实现弹出框，弹出框会有一个遮罩层，这个时候滚动条会隐藏，网页宽度变大 ，造成网页抖动。

有个比较笨的办法，就是预先在会抖动的地方增加一个div或者li，这个li默认时候隐藏的

<li  id="topbar_li_right" class="nav-item dropdown notification-list" style="width:16.5px; display: none;"></li>  这里的class可随便写，主要时候宽度设置

默认时候隐藏，什么时候呈现呢？

如果页面没有滚动条，弹出框出来时候也不呈现，只有在页面有滚动条时候在呈现，关闭弹出框在重新隐藏这个有宽度的li

 

/* 遮罩层出现时候，打开顶部右侧li */
    $.topbarliShow = function () {
        if ($.isHasScroll()) //如果有滚动条
        {
            document.getElementById("topbar_li_right").style.display = ""; //呈现li
        }
    }

    $.topbarliHidden = function () {//隐藏这个li
            document.getElementById("topbar_li_right").style.display = "none";
    }

 

下边是判断页面是否有滚动条的函数　　

//判断页面是否有滚动条
    $.isHasScroll = function () {
        return (document.documentElement.clientHeight < document.documentElement.offsetHeight - 4);
    }

$.topbarliShow  $.topbarliHidden 这两个函数在哪里调用呢？

打开bootstrap.min.js 搜索setScrollbar，主要定位这两处

,this._setScrollbar(),a(document.body).addClass(p.OPEN),  //这里是隐藏滚动条的地方

,b._resetScrollbar()  //这里是关闭遮罩层时候展示滚动条的地方

bootstrap版本不同，写发略有不同，主要是搜索setScrollbar ，一个是setScrollbar()，一个是resetScrollbar()

 

在他们只有分别加上$.topbarliShow  $.topbarliHidden 变成

,this._setScrollbar(),a(document.body).addClass(p.OPEN),$.topbarliShow(),

,b._resetScrollbar(),$.topbarliHidden(),

这个就可以基本实现弹出框出来和关闭时候，页面不抖动了

 

转载于:https://www.cnblogs.com/webocean/p/7446743.html