滚动穿透问题解决方案

问题描述

移动端当有 fixed 遮罩背景和弹出层时，在品目上滑动能够滑动背景下面的内容，这就是注明的滚动穿透问题。

原因

解决方案

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

/**
  * 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');

参考链接

移动端滚动穿透问题完美解决方案

移动端滚动穿透问题