手机上经常碰到的在当前页面打开一个半透明弹窗,想要滑动浏览弹窗上的内容,确触发了下层父级页面的内容滚动,解决办法如下:
export const ModalHelper = (function (bodyCls) {
return {
scrollTop: document.scrollingElement ? document.scrollingElement.scrollTop : document.body.scrollTop,
afterOpen: function () {
ModalHelper.scrollTop = document.scrollingElement ? document.scrollingElement.scrollTop : document.body.scrollTop
document.body.classList.add(bodyCls) document.body.style.top = -ModalHelper.scrollTop + 'px'
},
beforeClose: function () {
document.body.classList.remove(bodyCls)
document.body.removeAttribute('style')
if (document.scrollingElement) {
document.scrollingElement.scrollTop = ModalHelper.scrollTop
} else { document.body.scrollTop = ModalHelper.scrollTop }
}
}
})('modal-open')
modal-open {
position:fixed;width:100%;
}
这段代码的作用是在弹窗弹起时调用afterOpen,给body加了class:model-open,把页面设置成position:fixed,并且把底层页面定位到当前浏览的位置,
弹窗关闭时调用beforeClose,移除body上的model-open class