解决bootstrap中模态框打开时页面发生一瞬间移动

相信很多人都在使用bootstrap中的modal时会出现一个诡异的现象，就是打开模态框时页面会出现一瞬间的移动，就好像页面发生了抖动，后来看了看bootstrap的文档



原来是当模态框弹出时，会为body添加.modal-open类，modal-open为body设置了overflow:hidden，因此原来页面的滚动条就消失了，页面会因此而右移，为了防止这一状况，bootstrap在打开模态框会为body设置padding-right: xx px; 这个数值为浏览器的滚动条宽度，所以会出现了页面一瞬间移动（滚动条消失->body添加了padding-right）
解决方法（这个算是Hack的吧）

css:
 .myModal-open{
   overflow-y:scroll;           //保持滚动条的占位~
   padding-right:0  !important;
} 

js:
// 如果页面有滚动条则添加自定义类myModal-open

$('#userModal').on('show.bs.modal', function (e) {      //监听模态框打开
    if (isScroll()) {                                         

 $("body").addClass("myModal-open")
}
}) 

//监听模态框关闭，有hide.bs.modal和hidden.bs.modal，选择后者                                                                                        因为要最后才能把我们自定义的样式去掉

$('#userModal').on('hidden.bs.modal', function (e) {      
   $("body").removeClass("myModal-open")
}) 

附上判断浏览器是否有滚动条的方法~
var isScroll = function (el) { 
     // test targets   
var elems = el ? [el] : [document.documentElement, document.body];   
var scrollX = false, scrollY = false;    
for (var i = 0; i < elems.length; i++) {      var o = elems[i];     
// test horizontal     
var sl = o.scrollLeft;     
o.scrollLeft += (sl > 0) ? -1 : 1;    
o.scrollLeft !== sl && (scrollX = scrollX || true);  
o.scrollLeft = sl;     
// test vertical    
var st = o.scrollTop;  
o.scrollTop += (st > 0) ? -1 : 1;    
o.scrollTop !== st && (scrollY = scrollY || true);   
o.scrollTop = st;  
}    
// ret  
return scrollY; 
};