html页面有弹出框时禁止页面(body)滚动

阅读 (962)
在使用bootstrap modal弹出框时,在移动端,body还是可以被拖动

首先修改css样式,因为bootstrap modal组件会在弹出框弹出时,在body上加上modal-open 的 class,那我们只要修改modal-open样式即可,如果是其它插件,同时在背景滚动元素上加上class,然后加上position: fixed;也可达到同样效果

.modal-open{
  -webkit-overflow-scrolling:auto;
  position: fixed;
  z-index: 1;
}

加完以上样式,你就可以测试一下,页面底层在弹出框弹出后是否还能被滚动。

测试完毕后,我需要解决另一个问题:如果页面比较长,比如一篇比较长的文章,一开始弹出框并打开,我们在浏览文章时,已经滚动到页面比较下的位置,这里如果再点击打开弹出框,由于在弹出框显示的时候,我们给底层滚动的页面加上了position:fixed; 此时由于css 的top值未设定,所以底层滚动页面会被滚动到顶部。

此时我们需要修改的是给modal-open加上一个top值,而这个值是我们刚才页面滚动距离顶部的距离,但需要的是这个值的负数值,即如果页面滚动距离顶部1000,我们需要设置的top值却是-1000px

例:

// 解决botoomModal弹出后,body因为加上了fixed样式,回到顶部的问题,以下代码使得弹出框显示时,body任然保留在浏览时的位置
var offset = 0;
$('#myModal').on('show.bs.modal', function (event) {
    offset = $(window).scrollTop();
    console.log(offset);
    $('body').css('top',  '-'+offset+'px');
});

在关闭时,由于body上没有了modal-open的class,此时的top样式不会再生效,我们需要在关闭弹出框时,将页面再滚动到浏览位置

例:

// 当弹出框关闭时,fixed样式去掉后,将页面滚动到之前的浏览位置
$('#myModal').on('hidden.bs.modal', function (event) {
    console.log(offset); // 这里的offset是全局变量,所以会沿用上次的打开时的值
    $('body').css('top',  '0px'); // 这里是否重置top:0px意义不大,因为再次打开弹出框时,offset又被重新计算了,而些此时top值因为position不再是fixed,所以这里不会生效
    $(window).scrollTop(offset);
});

以上方法亲测有效,兼容IOS和安卓

更新于:2019-12-14 12:06:54
返回顶部