滚动穿透

滚动穿透是移动端开发中一个很常见的问题。在移动端开发中避免不了弹窗、浮层等操作，如果不做任何操作，那么在浮层滚动时，下方的页面也会跟随滚动。

解决方案

解决方案根据实际场景有所不同。

弹窗不存在滚动条

思路：弹窗不需要滚动，因此只需要阻止touchmove事件即可。

el.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

弹窗存在滚动条

思路：打开弹窗，禁止body滚动；关闭弹窗，允许body滚动。难点在于需要保持body滚动条原本的位置。

弹窗开关：body增加/删除class，scrollTop保存或者还原

/* 声明一个class，给body使用 */
.modal-open {
  position: fixed;
  width: 100%;
}

打开弹窗后的回调函数：

this.scrollPos = document.scrollingElement.scrollTop; // 保存当前body滚动条位置
document.body.classList.add('modal-open');
document.body.style.top = -this.scrollPos + 'px';

关闭弹窗的回调函数：

document.body.classList.remove('modal-open');
document.scrollingElement.scrollTop = this.scrollPos;