vue 弹框产生的滚动穿透问题的解决

更新时间：2018年09月21日 14:59:15 作者：Peggy7

这篇文章主要介绍了vue 弹框产生的滚动穿透问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。

首先定义一个全局样式：

.noscroll{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

创建一个dom.js文件，定义几个方法：

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}
 
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  if(el.className === ''){
    el.className += className
  }else{
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  }
  
}

export function removeClass(el,className) {
  if (hasClass(el, className)) {
    el.className = el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
  };
}

获取<html>标签的DOM：

this.htmlDom = document.getElementsByTagName('html')[0];

在弹框弹出来的时候：

addClass(this.htmlDom, 'noscroll');

弹框关闭的时候

removeClass(this.htmlDom, 'noscroll');

这样就可以解决滚动穿透的问题了~

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

您可能感兴趣的文章:

vue通过cookie获取用户登录信息的思路详解
这篇文章主要介绍了vue通过cookie获取用户登录信息的思路详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
Vue2 中的数据劫持简写示例
这篇文章主要为大家介绍了Vue2 中的数据劫持简写示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
vue3 mark.js 实现文字标注功能(案例代码)
这篇文章主要介绍了vue3 mark.js 实现文字标注功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
Vue的虚拟DOM和diff算法你了解吗
这篇文章主要为大家详细介绍了Vue的虚拟DOM和diff算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue项目部署到nginx/tomcat服务器的实现
这篇文章主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue+elementUI配置表格的列显示与隐藏
这篇文章主要为大家详细介绍了vue+elementUI配置表格的列显示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue3 style CSS 变量注入的实现
本文主要介绍了Vue3 style CSS 变量注入的实现，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
Vue3中slot插槽基本使用
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
2022-08-08
基于element-UI input等组件宽度修改方式
这篇文章主要介绍了基于element-UI input等组件宽度修改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
VUE签字组件vue-esign安装使用教程
在我们开发项目中,特别是流程审批类的项目,最后一步会提交审核,审核员看完相应信息以后,没问题就会签字通过审批,这篇文章主要给大家介绍了关于VUE签字组件vue-esign安装使用的相关资料,需要的朋友可以参考下
2023-09-09