移动端滚动穿透问题

手机上经常碰到的在当前页面打开一个半透明弹窗,想要滑动浏览弹窗上的内容,确触发了下层父级页面的内容滚动,解决办法如下:

export const ModalHelper = (function (bodyCls) {

  return {

    scrollTop: document.scrollingElement ? document.scrollingElement.scrollTop : document.body.scrollTop,

      afterOpen: function () {

      ModalHelper.scrollTop = document.scrollingElement ? document.scrollingElement.scrollTop : document.body.scrollTop

      document.body.classList.add(bodyCls) document.body.style.top = -ModalHelper.scrollTop + 'px'

    },

    beforeClose: function () {

      document.body.classList.remove(bodyCls)

      document.body.removeAttribute('style')

      if (document.scrollingElement) {

        document.scrollingElement.scrollTop = ModalHelper.scrollTop

      } else { document.body.scrollTop = ModalHelper.scrollTop }

    }

   }

})('modal-open')

modal-open {

  position:fixed;width:100%;

}

这段代码的作用是在弹窗弹起时调用afterOpen,给body加了class:model-open,把页面设置成position:fixed,并且把底层页面定位到当前浏览的位置,

弹窗关闭时调用beforeClose,移除body上的model-open class

 
原文地址:https://www.cnblogs.com/fq1017/p/11719560.html