滚动穿透

当页面出现弹框，也就是常见的蒙层modal时，一定会遇到滚动穿透这个问题。

当你滑动弹框时，下面的背景也会跟着滚动，这个就叫滚动穿透。

那在此梳理一下滚动穿透的解决方案

弹框无滚动时

当你的弹框不需要滚动时，防止滚动穿透，只需要简单的prevent整个页面的touchmove事件就可以啦

弹框有滚动时

这个时候为了保证你的弹框能正常滚动，你不能阻止整个页面的touchmove事件

这个时候，只需要固定住背景的高度，就可以防止背景滚动了！

具体操作就是，在弹框打开时，给你的页面body增加固定高度的样式

document.body.classList.add('modal-open');

.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
}

对于IOS9的ipad，一定要加上position:fixed，不然仍会出现滚动穿透的情况

最后，弹框关闭的时候别忘了移除样式

document.body.classList.remove('modal-open');

背景有初始滚动位置时

可以看到，上面的样式里top我们设置了0，这对于没有滚动过的背景是ok的，但是对于滚动过的背景，滚动位置就丢失了，所以对于滚动过的背景，需要记一下它的滚动位置，然后给top设置上，就可以了！