美文网首页
移动端在有弹出层时如何禁止底层的滚动

移动端在有弹出层时如何禁止底层的滚动

作者: _conquer_ | 来源:发表于2017-12-18 11:41 被阅读0次

众所周知,移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是臭名昭著的滚动穿透问题

解决方案1

//css
 body.modal-open {
    overflow: hidden;
    height: 100%;
}

页面弹出层上将 .modal-open 添加到 html 上,禁用 html 和 body 的滚动条
但是这个方案有两个缺点:

  • 由于 html 和 body的滚动条都被禁用,弹出层后页面的滚动位置会丢失,需要用 js 来还原
  • 页面的背景还是能够有滚的动的效果
//js
modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
},
  • 这样用 js 阻止滚动后看起来效果不错了,但是也有一个缺点:弹出层里不能有其它需要滚动的内容(如大段文字需要固定高度,显示滚动条也会被阻止)

解决方案2(建议使用)

//css
body.modal-open {
    position: fixed;
    width: 100%;
}

如果只是上面的 css,滚动条的位置同样会丢失,所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

//弹出层打开的时候
function getScrollTop() {
        var scrollTop = 0;
        if(document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if(document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }
var scrollTop=getScrollTop(); //设置成全局的
document.body.className="modal-open";
document.body.style.top = -scrollTop + 'px';
//弹出层关闭的时候
document.body.className=" ";
document.scrollingElement.scrollTop = scrollTop;
  • tips
    如何让一个div可以滚动(给div一个固定高度,然后设置overflow-y:auto;)
    引用地址

相关文章

网友评论

      本文标题:移动端在有弹出层时如何禁止底层的滚动

      本文链接:https://www.haomeiwen.com/subject/rpgpwxtx.html