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

     
  • 相关阅读:
    CentOS+Phpstudy安装Sqli-Labs
    机器学习中的偏差与方差
    DVWA学习之SQL注入
    【转】EDNS
    【转】个人总结-网络安全学习和CTF必不可少的一些网站
    信息安全书单
    全球信息安全会议 Top 50
    【转】Linux编程之UDP SOCKET全攻略
    网络协议栈学习之重要的数据结构
    网络协议栈学习(二)创建 socket
  • 原文地址:https://www.cnblogs.com/fq1017/p/11719560.html
Copyright © 2011-2022 走看看