菜单

缓解滚动条出现吃页面左右振动的方案

2018年11月15日 - Bootstrap

}

 

overflow-y: auto;
overflow-x: hidden;

据悉地方的叙说,解决页面抖动的思路是:

width: 100vw;

函数使用办法:

body{

  (2)当页面内容无超(即页面本身不有滚动条),则modal弹出后,由于body设置了margin-right,会使页面往左偏移,当modal关闭后,body的margin-right为0,页面往右侧偏移,就出现页面抖动。

}

        设置modal — overflow:auto;overflow-y:scroll;

html{ 

根据scrollHeight和clientHeight,分别于modal加载前和关闭时调整body的overflow、margin-right和.modal的overflow属性,以覆盖bootstrap.css中之样式

一味需要在css中安

Bootstrap为了让有的页面(这里因内容溢起与无溢起)显示力量同样,采取的点子如下:

 

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

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

函数如下:

这样设置的作用是:

 

  (1)当页面内容超过(即页面本身存在滚动条),则moda弹来后,原body滚动禁止,body的margin-right和modal的轮转久位置重叠,此时页面是匪见面并发震荡现象的;

当Modal显示时,设置body —
overflow:hidden;margin-right:15px;(设置15px凡为浏览器的轮转漫漫占位是15px);(通过以modal显示时让body添加.modal-open类实现)

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图