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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
webpack external模块的具体使用
Mar 10 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 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/04/15 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python返回数组的索引实例
2019/11/28 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
英文导游欢迎词
2014/01/11 职场文书
自我鉴定书面格式
2014/01/13 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
电子银行营销方案
2014/02/22 职场文书
中秋节随笔
2015/08/15 职场文书
教师病假条范文
2015/08/17 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript