bootstrap中两种方法解决模态框造成页面抖动的问题

在使用bootstrap的modal模态窗口组件时,触发后会发现页面有抖动现象。这是因为它隐藏了浏览器滚动条,页面就相当于变宽了,关闭模态窗口后,页面又出现滚动条,页面又变窄了,这一伸一缩就会使页面产生抖动现象。

方法一,(虽然可以解决问题,但是如果模态框内容高度超出页面,会造成查看不了问题)

需要改源码
解决方法很简单,就是干掉隐藏滚动条的代码。总共删除bootstrap.js文件中6行代码就可以了。
以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例。

第一处在971行左右,删除这3句

this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')

第二处1081行左右,也删除3句

that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()

这样就好了。都是写无关紧要的代码,给body加内边距的,不会影响其他组件的运行。

方案二,(滚动条会一直存在)

不需要改源码
1.页面没有滚动条的情况下:

body{
    padding-right:0 !important;
}

2.页面有滚动条的情况下:

.modal-open{
    overflow-y: scroll;
}
body{
    padding-right:0 !important;
}

两种方法都可以解决问题,但是两种方法都存在弊端,在不影响需求的情况下,可以选择上面两种方法之一来处理,但是要是对页面要求过高,那么只能通过js来控制 滚动条,根据条件是否保存滚动条。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。