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

     
  • 相关阅读:
    sqlilab less19-less22
    sqlilab less11-less18
    逆向——序列号相关总结
    xctf攻防世界——crackme writeup
    ESP定律脱壳——NsPack3.x脱壳
    避免全局变量漫天飞
    C语言实现队列
    STM32中的C语言知识点
    超时事件时间戳
    STM32-电源控制、低功耗模式
  • 原文地址:https://www.cnblogs.com/fq1017/p/11719560.html
Copyright © 2011-2022 走看看