使用bootstrap時，往往會出現頁面抖動的效果，使得用戶體驗十分不友好。
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中的樣式
函數如下：
(function(){
var Modal = {};
//解決Modal彈出時頁面左右移動問題
Modal.adjustBody_beforeShow = function(){
console.log("1")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({
'overflow' : 'hidden',
'margin-left' : '17px'
});
$('.modal').css({'overflow-y':'scroll'})
}else{
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
$('.modal').css({'overflow-y':'auto'})
}
}
Modal.adjustBody_afterShow = function(){
console.log("2")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
}else{
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
}
}
$('#Xabout').modal('hide');
$('#Xabout').on('show.bs.modal', function (event) {
Modal.adjustBody_beforeShow();
});
$('#Xabout').on('hidden.bs.modal', function (event) {
Modal.adjustBody_afterShow();
});
})();
CSS:body{ overflow: auto !important;} .modal{ overflow: auto !important;}
原文地址1：http://www.cnblogs.com/whimqueen/p/4704919.htm
原文地址2：https://my.oschina.net/deacyn/blog/508249