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学习点滴 call、apply的区别
Oct 22 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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 Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
jquery 指南/入门基础
2007/11/30 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python协程用法实例分析
2015/06/04 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
详解Python的循环结构知识点
2019/05/20 Python
Python中的引用知识点总结
2019/05/20 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
体育教师自荐信范文
2013/12/16 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
关于打架的检讨书
2014/01/17 职场文书
公司营业员的自我评价
2014/03/04 职场文书
小学师德师风整改措施
2014/10/27 职场文书
谢师宴答谢词
2015/01/05 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书