移动端穿透问题解决

转载自：https://segmentfault.com/a/1190000005617307

问题 不多描述，就是fixed弹出层，弹窗滚动条move的时候，弹窗下面的内容也可以滚动。

js 之 touchmove + preventDefault

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

这样用 js 阻止滚动后看起来效果不错了，但是也有一个缺点：

• 弹出层里不能有其它需要滚动的内容（如大段文字需要固定高度，显示滚动条也会被阻止）

解决方案 position: fixed

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

如果只是上面的 css，滚动条的位置会丢失，弹窗下内容就变成了首屏内容。
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

/**
  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
  * https://github.com/twbs/bootstrap/issues/15852
  * requires document.scrollingElement polyfill https://uedsky.com/demo/src/polyfills/document.scrollingElement.js
  */
var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');