解決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;}

原文連結：https://blog.csdn.net/weixin_33924220/article/details/91762150