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的 ...
随机推荐
- RPC协议解析
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.简言之,RPC使得程序能够像访问本地 ...
- 手写CSS+js实现radio单选按钮
有的时候我们需要用长得漂亮一点的单选按钮,那么,就要抛弃原有的自己来写,下面就是我实现的 <div class="radio"><span class=" ...
- jsoncpp 源码编译与简单使用
******************************************************标准C++实现jsoncpp 源码使用编译(VC2012 MFC)(Qt5.2 Widget ...
- nginx做反向代理时出现302错误（转载）
现象:nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 详细现象如下: 浏览器请求登录页: 输入账号密码点击登录: 很明显登录后跳转的地址少了端口号. 原因:proxy.conf文 ...
- nodejs工作大全
1.修改文件夹中图片的名称 var fs = require('fs');var fileDirectory = "F:\\zdw\\修改文件夹名称\\newFile";var n ...
- 大数据笔记（五）——HDFS的高级特性
一.HDFS的回收站: recyclebin 1.HDFS的回收站默认是关闭的 2.启用回收站:去core-site.xml配置 路径:/root/training/hadoop-2.7.3/etc/ ...
- 北风设计模式课程---依赖倒置原则（Dependency Inversion Principle）
北风设计模式课程---依赖倒置原则(Dependency Inversion Principle) 一.总结 一句话总结: 面向对象技术的根基:依赖倒置原则(Dependency Inversion ...
- centos双网卡配置
centos双网卡问题,一个网卡配置局域网,一个网卡配置公网,如果内网访问自动走eth1,如果外网访问自动走eth2. 需要配置路由吗? 1. 首先查看机器是否是双网卡,命令如下: lspci | g ...
- page size
https://dev.mysql.com/doc/refman/5.7/en/glossary.html#glos_page_size https://dev.mysql.com/doc/refma ...
- 安装fedora23后的一些杂项设置
Boxes是创建虚拟机的技术 tweak: 拧, 捏; 微调 he gave the boy's ear a painful tweak. it's a small tweak over the ra ...