首先定义一个全局样式：



.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. 32.密码学知识-SSL/TLS-9——2019年12月19日

    9. SSL/TLS "SSL/TLS --- 为了更安全的通信" 本章中我们将学习SSL/TLS的相关知识. SSL/TLS是世界上应用最广泛的密码通信方法.比如说,当在网上商城 ...

  2. django开发环境搭建（参考流程)

    django开发环境搭建(参考流程) 2013-08-08 01:09:06 分类: LINUX 原文地址:django开发环境搭建(参考流程) 作者:bailiangcn 对于一个初学者,在实际的开 ...

  3. ESP8266的使用学习

     ESP8266-01  ESP8266-12F简介 让灯闪烁    ESP8266-中断   模拟输入(ADC-A0)  模拟输出(PWM)  串口通信(Serial)    EEPROM类库的使用 ...

  4. 【GDOI2014模拟】服务器

    前言 直到比赛最后几分钟,才发现60%数据居然是一个水dp,结果没打完. 题目 我们需要将一个文件复制到n个服务器上,这些服务器的编号为S1, S2, -, Sn. 首先,我们可以选择一些服务器,直接 ...

  5. springboot创建拦截器

    一.创建一个MyIntercepor实现HandlerInterceptor接口的类             二.创建一个WebMvcConfig实现WebMvcConfigurer的类       ...

  6. jmeter测试https请求之导入证书

    jmeter测试https请求   公司最近在搞全站HTTPS改造,进一步提高网站的安全性,防止运营商劫持.那么,改造完成后,所有前后端的URL将全部为https. So ,研究下怎么用Jmeter访 ...

  7. visual studio 2017激活

    VS2017专业版和企业版激活密钥   Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...

  8. PHP基础教程 常见PHP错误类型及屏蔽方法

    程序只要在运行,就免不了会出现错误,错误很常见,比如Error,Notice,Warning等等.这篇文章兄弟连PHP培训 小编来跟大家具体说一下PHP的错误类型和屏蔽方法.在 PHP 中,主要有以下 ...

  9. php实现大文件上传带进度条

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  10. Java——static

    [static] <1>static成员变量存储在内存data segment区域,不是存放在堆中. <2>静态成员变量属于整个类,任何一个对象都可以访问这个值:如果没有对象, ...