解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面（这里指内容溢出和不溢出）显示效果一样，采取的方法如下：

当Modal显示时，设置body -- overflow:hidden;margin-right:15px;（设置15px是因为浏览器的滚动条占位是15px）;（通过在modal显示时给body添加.modal-open类实现）

第一种设置modal -- overflow:auto;overflow-y:scroll;

这样设置的效果是：

　　(1)当页面内容超出（即页面本身存在滚动条），则moda弹出后，原body滚动禁止，body的margin-right和modal的滚动条位置重叠，此时页面是不会出现抖动现象的；

　　(2)当页面内容未超出(即页面本身不存在滚动条)，则modal弹出后，由于body设置了margin-right，会使得页面向左偏移，当modal关闭后，body的margin-right为0，页面向右偏移，就出现页面抖动。

 

根据上面的描述，解决页面抖动的思路是：

根据scrollHeight和clientHeight，分别在modal加载前和关闭时调整body的overflow、margin-right和.modal的overflow属性，以覆盖bootstrap.css中的样式

函数如下：

 

//解决Modal弹出时页面左右移动问题  Modal.prototype.adjustBody_beforeShow = function(){    var body_scrollHeight = $('body')[0].scrollHeight;    var docHeight = document.documentElement.clientHeight;    if(body_scrollHeight > docHeight){      $('body').css({        'overflow' : 'hidden',        'margin-right' : '15px'      });      $('.modal').css({'overflow-y':'scroll'})    }else{      $('body').css({        'overflow' : 'auto',        'margin-right' : '0'      });      $('.modal').css({'overflow-y':'auto'})    }  }  Modal.prototype.adjustBody_afterShow = function(){    var body_scrollHeight = $('body')[0].scrollHeight;    var docHeight = document.documentElement.clientHeight;    if(body_scrollHeight > docHeight){      $('body').css({        'overflow' : 'auto',        'margin-right' : '0'      });    }else{      $('body').css({        'overflow' : 'auto',        'margin-right' : '0'      });    }  }

函数使用方法：

Modal.prototype.show = function (_relatedTarget) {    this.adjustBody_beforeShow();    //...other code}Modal.prototype.hide = function (e) {    this.adjustBody_afterShow();    //...other code}

第二种方法删除源码 去掉对body滚动条的隐藏
以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例。
第一处在971行左右，删除这3句
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
第二处1081行左右，也删除3句
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
这样就好了。都是写无关紧要的代码，给body加内边距的，不会影响其他组件的运行。