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的 ...
随机推荐
- js中的 与和或 , && ,||
|| 1.只要"||"前面为false,不管"||"后面是true还是false,都返回"||"后面的值. 2.只要"||&quo ...
- 链表中倒数第k个节点(python)
题目描述 输入一个链表,输出该链表中倒数第k个结点. 无力吐槽牛客网... class Solution: def FindKthToTail(self, head, k): # write code ...
- LeetCode--096--不同的二叉搜索树(python)
我的思路比较low直接看官方题解吧... class Solution: def numTrees(self, n: int) -> int: G = [0] * (n+1) G[0],G[1] ...
- node.js从入门到起飞
第一个node程序: 首先创建一个js文件,命名index.js(可随意),然后在文件里面输入 : console.log("Hello World"); 使用 Git Bash ...
- Angular前端开源框架
1. 项目框架介绍 本项目采用了开源项目ngx-admin作为脚手架.基于Angular 8 +,Bootstrap 4+和Nebular,ngx-admin是最受欢迎的后台管理模板,是用于个人和商 ...
- 8：Spring Boot Shiro记住密码
1,添加Cookie 2,添加安全管理器中 3,配置记住我, 4 ,在登录页面中加我rememberMe复选框 /** * 1.配置Cookie对象 * 记住我的cookie:rememberMe * ...
- HDU 6230 Palindrome ( Manacher && 树状数组)
题意 : 给定一个字符串S,问你有多少长度为 n 的子串满足 S[i]=S[2n−i]=S[2n+i−2] (1≤i≤n) 参考自 ==> 博客 分析 : 可以看出满足题目要求的特殊回文子串其 ...
- ndn挖坑记(二)
目录 如何使用ndnSIM运行自己的仿真实验 基本要点 开始动手 BUG记录 如何使用ndnSIM运行自己的仿真实验 基本要点 仿真场景可以在NS-3目录下的scratch/ or src/ndnSI ...
- luogu【P1024 一元三次方程求解】题解
题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- C中的system函数
windows操作系统下system () 函数详解(主要是在C语言中的应用) 函数名: system 功 能: 发出一个DOS命令 用 法: int system(char *command); s ...