• 移动端滚动穿透问题


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

    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

     
  • 相关阅读:
    如何写文件上传下载
    填充表格的模板代码
    ArcGIS Server 分布式注意事项
    在android上导入第三方jar包 报错:Could not find class
    @Override annotation 出错
    签到时间
    分页三条件查询
    上传图片
    分页
    二级联动
  • 原文地址:https://www.cnblogs.com/fq1017/p/11719560.html
Copyright © 2020-2023  润新知