zoukankan      html  css  js  c++  java
  • js 弹层下面的body禁止滚动

    弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为。

    1.新建utils/modalHelper.js文件

    // 解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用
    let _scrollTop
    class ModalHelper {
      // popup 显示时调用
      static afterOpen () {
        _scrollTop = document.scrollingElement.scrollTop
        document.body.style.position = 'fixed'
        document.body.style.top = -_scrollTop + 'px'
      }
    
      // popup 关闭时调用
      static beforeClose () {
        document.body.style.position = ''
        document.body.style.top = ''
        // 使 scrollTop 恢复原状
        document.scrollingElement.scrollTop = _scrollTop
      }
    }
    
    export default ModalHelper
    

    2.main.js中全局引入ModalHelper

    import ModalHelper from './utils/modalHelper'
    Vue.prototype.$modalHelper = ModalHelper

    3.vue页面使用

    isPayment1(val) {
      if (val) {
        this.$modalHelper.afterOpen(); // 打开禁用
      } else {
        this.$modalHelper.beforeClose(); // 关闭禁用
      }
    },

    4.为避免用户使用按键返回,需在页面离开时移除禁用即可

    beforeRouteLeave (to, from, next) {
      this.$modalHelper.beforeClose()
      next()
    },

    参考:

    1、https://blog.csdn.net/guxiansheng1991/article/details/80503497

    2、https://www.cnblogs.com/yongwang/p/7804490.html

  • 相关阅读:
    Swing 2
    Swing 1
    集合
    关于sql 模糊字段查询语句
    关于前端开发的几篇文章
    黄金点游戏
    word count
    四则运算
    软件工程——《构建之法》读后困惑
    自我介绍
  • 原文地址:https://www.cnblogs.com/chenyablog/p/11905980.html
Copyright © 2011-2022 走看看