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的 ...
随机推荐
- [洛谷P4107] HEOI2015 兔子与樱花
问题描述 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...
- Hybris commerce产品主数据的搜索API，批量返回若干主数据的值
新建一个产品,identifier设置为i042416-1,创建之后立即能够在Backoffice里搜索出来: 等到Storefront的indexing做完之后,前台通过关键字i042416也能将这 ...
- PHP文件的上传和下载
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- HDU 2243 考研路茫茫——单词情结 ( Trie图 && DP && 矩阵构造幂和 )
题意 : 长度不超过L,只由小写字母组成的,至少包含一个词根的单词,一共可能有多少个呢?这里就不考虑单词是否有实际意义. 比如一共有2个词根 aa 和 ab ,则可能存在104个长度不超过3的单词, ...
- Java——容器
[容器API] <1>J2SDK所提供的容器位于java.util包内.
- Go简易分布式对象存储 合并文件的所有分块为一个文件
项目 项目地址: https://github.com/Draymonders/cloud 欢迎大家Watch or Star 缘由 由于项目中对大文件进行5MB为一个分块上传(多线程,提升上传效率) ...
- 【BZOJ1132】Tro（叉积）
题意:平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 N个点的坐标,其值在[0,10000] 思路:按从左到右的预处理点排序 每次枚举最左点作为原点,把叉积从大到小排 ...
- 1.Windows下安装nginx
1. 到nginx官网http://nginx.org/上下载相应的安装包 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如下图所示: 进入window的cm ...
- 微信小程序、SSL证书、开启服务器TSL1.0、TSL1.1、TSL1.2服务
微信小程序.SSL证书.开启服务器TSL1.0.TSL1.1.TSL1.2服务 https://blog.csdn.net/qq_32933615/article/details/70143105
- WinForm实现最小化右下角
首先,要在窗体里面加入这么两个控件,左边的是托盘控件,右边的是菜单控件. 然后设置窗体的FormClosing事件: if (e.CloseReason == CloseReason.UserClos ...