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