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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Vue 请求传公共参数的操作
Jul 31 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php 短链接算法收集与分析
2011/12/30 PHP
apache php模块整合操作指南
2012/11/16 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python多进程同步简单实现代码
2016/04/27 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
计算机专业求职信
2014/06/02 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
element多个表单校验的实现
2021/05/27 Javascript
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
python字典进行运算原理及实例分享
2021/08/02 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
Nginx配置使用详解
2022/07/07 Servers