脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js禁止body滚动

js使弹层下面的body禁止滚动

 更新时间：2022年06月28日 08:38:40   作者：小旭2021  
这篇文章介绍了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()
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue组件创建的三种方式小结

    vue组件创建的三种方式小结

    这篇文章主要介绍了vue组件创建的三种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript中实现键值对应的字典与哈希表结构的示例

    JavaScript中实现键值对应的字典与哈希表结构的示例

    字典或者哈希表这样的键值对应结构在其他很多语言中都有内置,非常好用,这里我们来看一下JavaScript中实现键值对应的字典与哈希表结构的示例:
    2016-06-06
  • Bootbox将后台JSON数据填充Form表单的实例代码

    Bootbox将后台JSON数据填充Form表单的实例代码

    通过控制器创建一个Index视图，写入下列HTML代码，这里我创建了一个分部视图，不创建直接写在同一个页面也是一样的效果。这篇文章主要介绍了Bootbox将后台JSON数据填充Form表单 ,需要的朋友可以参考下
    2018-09-09
  • javascript中call apply 的应用场景

    javascript中call apply 的应用场景

    call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.
    2015-04-04
  • jquery实现左右滑动式轮播图

    jquery实现左右滑动式轮播图

    这篇文章主要为大家详细介绍了jquery实现左右滑动式轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS中substring与substr的用法

    JS中substring与substr的用法

    这篇文章主要介绍了JS中substring与substr的用法讲解，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-11-11
  • JS 组件系列之BootstrapTable的treegrid功能

    JS 组件系列之BootstrapTable的treegrid功能

    这篇文章主要介绍了JS 组件系列之BootstrapTable的treegrid功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06
  • 详谈构造函数加括号与不加括号的区别

    详谈构造函数加括号与不加括号的区别

    下面小编就为大家带来一篇详谈构造函数加括号与不加括号的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • CodeReview常见的几个问题梳理解决示例

    CodeReview常见的几个问题梳理解决示例

    这篇文章主要为大家介绍了CodeReview常见的几个问题梳理解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • IE中getElementsByName()对有些元素无效的解决方案

    IE中getElementsByName()对有些元素无效的解决方案

    这篇文章主要介绍了IE中getElementsByName()对有些元素无效的解决方案,很简单，很实用，需要的朋友可以参考下
    2014-09-09

最新评论