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

     
  • 相关阅读:
    什么是RUP
    oracle 导入导出
    jsp 标签
    java json 交互
    Spring MVC 学习过程遇到的问题
    Spring 与其他ORM 框架结合 作数据持久层解析 (转)
    Spring mvc 中快速获取request、reponse、session
    Spring 数据绑定
    spring mvc 请求对应控制器的解析策略配置
    spring 的几种注解
  • 原文地址:https://www.cnblogs.com/fq1017/p/11719560.html
Copyright © 2011-2022 走看看