如何解决移动端滚动穿透问题

什么是滚动穿透

在弹框上滑动时，会发现弹框下面的内容跟着在滚动，这个就是滚动穿透问题。

在 PC 端，通过在 body 上添加  overflow:hidden;  可以解决这个问题，但是该方法在移动端是无效的，所以我们通常意义上的滚动穿透指的都是移动端。

解决方案

方案一：position: fixed;

body.modal-open {
    position: fixed;
    height: 100%;  
}

通过为body添加 fixed 属性禁止body中其他元素滚动，但是会导致 body 中滚动位置丢失，所以还需要添加一些代码来记住以及还原滚动位置。

弹框前：

const scrollTop = document.body.scrollTop;

弹框后：

document.body.scrollTop = scrollTop;

方案二：touchmove+preventDefault

最好将所有弹框出现后禁止滚动的元素添加到一个 div 中（如果是为 body 元素添加 touchmove+preventDefault，会导致 modal 中内容过长时也不能滚动），然后为该元素添加 touchmove 事件监听，并阻止元素的默认行为。

$('.modal-open .main').on('touchmove', function(e) {
    e.preventDefault();
});