众所周知!滚动穿透真是一个遗臭万年的问题,困扰着许多程序猿的一大难题。
事发场景:
当在弹出的模态框上面进行拖动的时候,其下面的页面也会随之进行滚动,这真是一个很不好的用户体验,特定情况下也会产生比较严重的BUG。
下面我与大家分享一下解决这个遗臭万年问题的方法
modal: (function (bodyCls) {
var scrollTop;
return {
afterOpen: function () {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open')
没错~ 以上代码中有两个方法,可以在弹窗弹出的时候和弹窗关闭的时候分别去调用,简单实用~
'mtPopup':{
handler(val, oldVal){
if(val){
this.modal.afterOpen()
}else{
this.modal.beforeClose()
}
}
}
依照当前项目的业务场景,我这里去监听了这个弹窗开关的状态从而分别调用不同的方法。
这样我们就可以将这个难缠的问题彻底解决掉了~