在移动端页面上,当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是臭名昭著的滚动穿透问题
解决方法一:
css之overflow:hidden
html, body {
overflow: auto;
height: 100%;
}
使用这种方法时,在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突,导致在无限滚动请求下一页数据的时候请求不成功,但是如果你的页面上没有分页的,这样还是可以很好的解决滚动穿透问题
解决方法二:
touchmove + preventDefault
在弹出的提示框中阻止浏览器的默认行为以及冒泡行为,在可以滑动的dom元素中取消浏览器的默认行为以及冒泡行为
let stop = document.querySelector("#cancel");
stop.addEventListener("touchmove", (event) => {
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //阻止冒泡
}, false)
let cancelStop = document.querySelector(".allReason");
cancelStop.addEventListener("touchmove", (event) => {
event.returnValue = true; //取消阻止默认行为
event.cancelBubble = true; //取消阻止冒泡
}, false)
使用这种方法会有一个缺点,那就是滑动其它地方,底部页面不会滚动,但是在可以滑动的页面中,将其滑动到底部或者顶部后继续滑动,底部页面任然可以滚动
解决方法三:
css之position: fixed + js 滚动条的位置
在弹出遮罩层的时候给body添加样式以及获取滚动条的位置,在关闭遮罩层的时候移除body的样式以及设置滚动条的位置
css
.scroll {
position: fixed;
width: 100%;
}
js 在需要的地方进行调用 scroll.afterOpen(); 和 scroll.beforeClose();
var scroll = (function (className) {
var scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;
document.body.classList.add(className);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(className);
document.scrollingElement.scrollTop = scrollTop;
document.body.scrollTop = scrollTop;
}
};
})('scroll');