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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
详解参数传递四种形式
Jul 21 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
php array的学习笔记
2012/05/10 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php session 写入数据库
2016/02/13 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
js 作用域和变量详解
2017/02/16 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
python3.3实现乘法表示例
2014/02/07 Python
在Python中使用模块的教程
2015/04/27 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python批量修改ssh密码的实现
2019/08/08 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
领导证婚人证婚词
2014/01/13 职场文书
大学自我评价
2014/02/12 职场文书
高中打架检讨书
2014/02/13 职场文书
房产委托公证书
2014/04/08 职场文书
大学生求职计划书
2014/04/30 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
环境建议书
2015/02/04 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python