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