zoukankan      html  css  js  c++  java
  • 完美解决vue项目中弹出框滑动时,内部页面也跟着滑动问题

    原文地址  https://www.jianshu.com/p/60db6cf91a69

    在main.js中设置全局函数:

    //弹出框禁止滑动
    Vue.prototype.noScroll = function () {
      var mo = function (e) { e.preventDefault() }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', mo, false)// 禁止页面滑动
    }
     
    //弹出框可以滑动
    Vue.prototype.canScroll = function () {
      var mo = function (e) {
        e.preventDefault()
      }
      document.body.style.overflow = ''// 出现滚动条
      document.removeEventListener('touchmove', mo, false)
    }
    

    在页面使用时:

    //禁止主页面滑动
    this.noScroll()

    //主页面可滑动
    this.canScroll()
    因为当初是在苹果手机上的测试的,但是在安卓手机发现有些限制,于是解决办法为在main.js中设置全局函数:

    
    // 弹出框显示后调用afterOpen,关闭弹出框前调用beforeClose
    Vue.prototype.ModalHelper = (function (bodyCls) {
      var scrollTop
      return {
        afterOpen: function () {
          scrollTop = document.scrollingElement.scrollTop
          document.body.classList.add(bodyCls)
          document.body.style.top = -scrollTop + 'px'
        },
        beforeClose: function () {
          document.body.classList.remove(bodyCls)
          // scrollTop lost after set position:fixed, restore it back.
          document.scrollingElement.scrollTop = scrollTop
        }
      }
    }('dialog-open'))
    

    在需要的地方调用:
    打开滑动: this.ModalHelper.beforeClose();
    关闭滑动: this.ModalHelper.afterOpen()

  • 相关阅读:
    Fiddler抓包整理
    redis集群
    php性能加速:Opcache
    细说一下position(定位),以及其他的小知识
    css的小知识3
    css小知识 2
    网页背景的属性及使用
    css小知识
    属性的特征和一些选择器的使用
    浏览器介绍和一些简单的代码
  • 原文地址:https://www.cnblogs.com/qhantime/p/11700998.html
Copyright © 2011-2022 走看看