Bootstrap3-技巧之解決Bootstrap模態框切換時頁面抖動 or頁面滾動條

Bootstrap3-技巧之解決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中的樣式

函數以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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

 函數使用方法：

1 2 3 4 5 6 7 8 9

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