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


Posted in Javascript onSeptember 21, 2018

最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决。程序员不能被业务绑架,有时间还是花点在代码,开始这次的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');

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
javascript 简练的几个函数
Aug 29 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 #Javascript
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 #Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 #Javascript
vue-rx的初步使用教程
Sep 21 #Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 #Javascript
Vue中插入HTML代码的方法
Sep 21 #Javascript
You might like
PHP生成压缩文件实例
2015/02/07 PHP
php无序树实现方法
2015/07/28 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP反射学习入门示例
2019/06/14 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
layui使用label标签的方法
2019/09/14 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
详解python中各种文件打开模式
2020/01/19 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python中列表的含义及用法
2020/05/26 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
制药工程专业应届生求职信
2013/09/24 职场文书
最新创业融资计划书
2014/01/19 职场文书
大学毕业感言100字
2014/02/03 职场文书
高考升学宴答谢词
2015/01/20 职场文书