解决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
}

但我是这样用的：

(function()?{
var?Modal?=?{};
//解决Modal弹出时页面左右移动问题
Modal.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.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'
??});
}
}
$('#addAppModal').modal('hide');
$('#addAppModal').on('show.bs.modal',?function?(event)?{
??Modal.adjustBody_beforeShow();
});
$('#addAppModal').on('hidden.bs.modal',?function?(event)?{
??Modal.adjustBody_afterShow();
});
})();

最佳的办法应该是CSS： 引用@僵叔叔的答案：body{ overflow: auto !important;} .modal{ overflow: auto !important;}?