使用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