移动端弹窗滚动穿透
什么是滚动穿透问题
滚动穿透问题(Scroll Through Issue)是在弹出窗口(如模态框、弹出菜单等)出现时,背后的页面仍然可以滚动的现象。这可能会导致用户在与弹出窗口进行交互时,无意中滚动到背后的页面。
为啥会出现滚动穿透
问题的根本原因是弹出窗口的出现没有阻止背后页面的滚动行为。在用户与弹出窗口交互的过程中,如果鼠标滚轮或触摸操作发生在背后的页面上,浏览器会默认处理这些滚动事件,导致页面滚动,尽管弹出窗口仍然处于可见状态。
解决方法
1、通过body的position
// 弹层显示时 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; document.body.style.top = (-1 * scrollTop) + 'px'; document.body.style.position = 'fixed'; document.body.style.overflow = 'hidden'; // 弹窗关闭时 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; document.body.style.overflow = 'auto'; document.body.style.position = 'relative'; document.body.style.top = ''; window.scrollTo(0, scrollTop);
2、通过css属性overscroll-behavior
.mask .popup_content { overscroll-behavior: contain; }