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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
js实现简易聊天对话框
Aug 17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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在Web开发领域的优势
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
PHP 输出缓存详解
2009/06/20 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
javascript图片预加载完整实例
2015/12/10 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
加工操作管理制度
2014/01/19 职场文书
分家协议书
2014/04/21 职场文书
年终奖发放方案
2014/06/02 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
五四青年节活动总结
2015/02/10 职场文书
教师个人教学总结
2015/02/11 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript