whimqueen

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中的样式

函数如下:

 

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

函数使用方法:

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

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

 

分类:

技术点:

相关文章: