众所周知,移动端当有 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;)
引用地址
网友评论