制作弹窗的时候遇到的问题:页面很长,需要滚动。弹窗里也需要滚动。当滚动弹窗内的内容时,发现弹窗的内容不滚动,反而是页面上的内容发生了滚动。
找了找,发现已经有解决方案。直接贴出处:移动端滚动穿透问题解决方案
用的是方案四。在弹窗打开的时候,设置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;