zoukankan      html  css  js  c++  java
  • 移动端滚动穿透问题

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

    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

     
  • 相关阅读:
    设计模式
    刷新所有视图存储过程
    js杨辉三角控制台输出
    2018申请淘宝客AppKey
    w3c标准 dom对象 事件冒泡和事件捕获
    promise原理
    vue virtual Dom
    css学习
    seo优化
    新概念学习
  • 原文地址:https://www.cnblogs.com/fq1017/p/11719560.html
Copyright © 2011-2022 走看看