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 弹框产生的滚动穿透问题的更多相关文章
- vue弹框，删除元素
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- vue 弹框
弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...
- 弹层蒙版（mask），ios滚动穿透，我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- 简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)
弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...
- 移动端ios升级到11及以上时，手机弹框输入光标出现错位问题
引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...
- modal 弹框遮罩层，滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- M站 滚动日历弹框
先放张效果图: 完整Demo: <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...
- vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
随机推荐
- java8 时间日期操作包总结
- 2019年8月19日~8月25日 第八周JAVA学习总结
临近开学,本周的任务完成情况不够好,平常乱七八糟的事情比较多,所以放在学习上的心思比较少.平均每天放在JAVA学习的时间约1个小时,放在编程的时间约半小时,解决问题的时间约1小时. 下一个星期就要开学 ...
- Python私有变量（Private Variable）
Variables can be private which can be useful on many occasions. A private variable can only be chang ...
- rpm安装jdk
rpm安装jdk:(https://blog.csdn.net/daerzei/article/details/80136457) 1.卸载系统自带的JDK rpm -qa|grep java # x ...
- 6398. 【NOIP2018模拟10.30】Generator（树状数组区间修改）
题目描述 Description Input Output 输出 q 行,第 i 行表示数据 Di 的答案. Sample Input 4 3 2 1 1 2 4 2 1 2 1 1 3 5 2 2 ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- mysql BETWEEN操作符 语法
mysql BETWEEN操作符 语法 作用:选取介于两个值之间的数据范围.这些值可以是数值.文本或者日期.大理石平台 语法:SELECT column_name(s) FROM table_name ...
- 转载--C 的回归
转载自http://blog.codingnow.com/2007/09/c_vs_cplusplus.html 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 goo ...
- 电脑配置Java环境变量之后，在cmd中仍然无法识别
在电脑上配置了Java的环境变量,但是在cmd框中仍然无法识别: 解决方法:cmd.exe右键---以管理员身份运行,即可识别
- Mysql中主键与索引
摘自: https://www.cnblogs.com/wicub/p/5898286.html 一.什么是索引?索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没 ...