移动端 弹出层禁止弹窗下的页面滚动

制作弹窗的时候遇到的问题：页面很长，需要滚动。弹窗里也需要滚动。当滚动弹窗内的内容时，发现弹窗的内容不滚动，反而是页面上的内容发生了滚动。

找了找，发现已经有解决方案。直接贴出处：移动端滚动穿透问题解决方案

用的是方案四。在弹窗打开的时候，设置body的position为fixed，且height: 100%。

这个方案有个问题是，打开的瞬间，body会自动滚到页面顶部。虽然第二次打开的时候就不会。 解决的方法就是，打开时先获取body的scrollTop(已经卷上去的高度)，打开后马上设置body的top为负的scrollTop。这个设置是瞬间的，所以看起来页面就不会被滚动到顶部。

代码：
弹窗打开之前

// before-open
const body = document.querySelector('body');
body.style.width = '100%';
this.scrollTop = document.scrollingElement.scrollTop;  // scrollTop 存储在全局
body.style.position = 'fixed';
document.body.style.top = -this.scrollTop + 'px';

弹窗关闭之前

// after-open
document.body.style.position = 'static';
document.scrollingElement.scrollTop = this.scrollTop;