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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
node中的session的具体使用
Sep 14 Javascript
layui的select联动实现代码
Sep 28 Javascript
使用jQuery实现购物车
Oct 29 jQuery
vue常用高阶函数及综合实例
Feb 25 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采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
Javascript学习指南
2014/12/01 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Django中url的反向查询的方法
2018/03/14 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python笔记之facade模式
2019/11/20 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
小学学校评估方案
2014/06/08 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
大学军训心得体会800字
2016/01/11 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers