首先定义一个全局样式:


.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 弹框产生的滚动穿透问题的更多相关文章

  1. vue弹框,删除元素

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. vue 弹框

    弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...

  3. 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案

    问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...

  4. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  5. 移动端ios升级到11及以上时,手机弹框输入光标出现错位问题

    引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...

  6. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  7. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  8. M站 滚动日历弹框

    先放张效果图: 完整Demo: <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...

  9. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

随机推荐

  1. Python---进阶---logging---装饰器打印日志2

    ### logging - logging.debug - logging.info - logging.warning - logging.error - logging.critical ---- ...

  2. 【NOIP2015模拟11.3】备用钥匙

    题目 你知道Just Odd Inventions社吗?这个公司的业务是"只不过是奇妙的发明(Just Odd Inventions)".这里简称为JOI社. JOI社有N名员工, ...

  3. 【leetcode】494. Target Sum

    题目如下: 解题思路:这题可以用动态规划来做.记dp[i][j] = x,表示使用nums的第0个到第i个之间的所有元素得到数值j有x种方法,那么很容易得到递推关系式,dp[i][j] = dp[i- ...

  4. 用 IDEA工具导入SVN项目。 步骤一:选择VCS

    Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS 步骤二:打开SVN Repositories 在 ...

  5. MapServer教程3

    Compiling on Unix Compiling on Win32 PHP MapScript Installation .NET MapScript Compilation IIS Setup ...

  6. windows10 ubuntu子系统 WSL文件位置

    windows10 的linux子系统(windows subsystem for linux)WSL 文件位置 以我的系统为例,WSL的root目录对应windows的: C:\Users\xiao ...

  7. 使用@Test报java.lang.NullPointerException at org.eclipse.jdt.internal.junit4.runner.SubForestFilter.shouldRun(SubForestFilter.java:81)异常

    对公司的项目进行二次开发时,在调试过程中用到@Test注解,运行使发现控制台报空指针异常,如图: 参考网上相应资料后,删除项目中自带的Junit4.jar,然后使用eclipse开发工具自带的Juni ...

  8. 数据存储-cookie、sessionstorage、localstorage

    HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...

  9. 002-es5.4.3结合spring-data-elasticsearch3.0.0.0使用

    一.使用前设置 1.elasticsearch开启 cmd下,进入安装目录 cd D:\developToool\elasticsearch-5.4.3 elasticsearch # 或者后台运行 ...

  10. springMVC解决跨域

    原文:https://www.cnblogs.com/shihaiming/p/9544060.html 介绍:   跨站 HTTP 请求(Cross-site HTTP request)是指发起请求 ...