解決Bootstrap模態框切換時頁面抖動 or頁面滾動條

解決Bootstrap模態框切換時頁面抖動 or頁面滾動條

 

Bootstrap為了讓所有的頁面（這里指內容溢出和不溢出）顯示效果一樣，采取的方法如下：

當Modal顯示時，設置body -- overflow:hidden;margin-right:17px;（設置17px是因為瀏覽器的滾動條占位是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;}