解决Bootstrap模态框切换时页面抖动 or页面滚动条

╰半橙微兮° 2022-06-06 10:47 259阅读 0赞

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.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();  
\}  
  
  
Modal.prototype.hide = function (e) \{  
    this.adjustBody\_afterShow();  
\}

第二种方法：这种方法比较暴力

1：在bootstrap.css中  找到.modal-open这个类，然后删除

2：给body添加一个样式  padding-right: 0 !important;