移动端弹窗滚动穿透

什么是滚动穿透问题

滚动穿透问题（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;
}