移动端页面穿透问题

引自：https://uedsky.com/demo/modal-scroll.html

css

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

html

<div class="text-center">
  <a class="js-open-modal" href="javascript:" target="_blank" rel="external">Open Modal</a>
  <div style="height:400px">
    <div>请使用手机浏览</div>
    <img src="https://www.uedsky.com/qr?desktop-only=1">
  </div>
  <a class="js-open-modal" href="javascript:" target="_blank" rel="external">Open Modal 2 (restore scrolling position)</a>
  <div style="height:400px"></div>
</div>
<div id="modal" class="modal">
  <div class="modal-frame">
    <div style="height:9em;overflow-y:auto;">
    这里是可滚动内容<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    Modal Content<br>
    </div>
  </div>

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

  function openModal() {
    document.getElementById('modal').style.display = 'block';
    ModalHelper.afterOpen();
  }
  function closeModal() {
    ModalHelper.beforeClose();
    document.getElementById('modal').style.display = 'none';
  }
  var btns = document.querySelectorAll('.js-open-modal');
  btns[0].onclick = openModal;
  btns[1].onclick = openModal;
  document.querySelector('#modal').onclick = closeModal;

 

转载于:https://www.cnblogs.com/myzy/p/9100445.html