vue 弹框产生的滚动穿透问题的解决
作者：Peggy7 时间：2024-04-26 17:40:54
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的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');
这样就可以解决滚动穿透的问题了~
来源：https://segmentfault.com/a/1190000016481693
标签：vue,弹框,滚动穿透
0
投稿猜你喜欢
mssql2005字符串连接方法 避免无效的连接错误
2024-01-14 20:45:05
python去除字符串中的换行符
2021-07-11 12:35:23
Python并行分布式框架Celery详解
2023-06-23 10:05:21
PHP开发中常用的三个表单验证函数使用小结
2023-11-21 19:15:50
python 获取毫秒数,计算调用时长的方法
2021-10-13 02:30:12
MySQL 的启动和连接方式实例分析
2024-01-21 09:06:03
Go语言实现新春祝福二维码的生成
2023-10-16 06:14:32
Vue的el-scrollbar实现自定义滚动
2021-08-16 19:06:22
VTK与Python实现机械臂三维模型可视化详解
2021-11-03 19:36:02
详解go语言中sort如何排序
2023-09-03 14:00:38
Sql学习第一天——SQL 练习题(建表/sql语句)
2024-01-22 05:44:39
分享8个非常流行的 Python 可视化工具包
2022-11-14 08:40:14
基于Python词云分析政府工作报告关键词
2022-12-23 12:01:21
vue移动端实现手指滑动效果
2023-07-02 16:48:49
Python数据类型详解（二）列表
2021-10-26 08:47:11
django 解决manage.py migrate无效的问题
2021-08-18 02:28:51
python 配置uwsgi 启动Django框架的详细教程
2022-10-29 06:11:15
Python OpenCV实战之与机器学习的碰撞
2022-04-30 17:17:21
详解Python发送email的三种方式
2023-07-01 07:19:28
Python 中的函数装饰器和闭包详解
2021-08-03 17:52:40
