vue 弹框产生的滚动穿透问题的解决
作者：Peggy7 发布时间：2024-04-26 17:40:54
标签：vue,弹框,滚动穿透
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的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
0
投稿猜你喜欢
- 代码优化 for($i=0;$i<8;$i++){ array_push($week,$arr); } for($i=0;$i<
在数据库表里，我们有时候会保存了很多重复的数据，这些重复的数据浪费资源，我们要将其删除掉，应该怎么处理呢？下面来看一下。先看下我们的表数据，- Go的标准库中有一个类型叫条件变量：sync.Cond。这种类型与互斥锁和读写锁不同，它不是开箱即用的，它需要与互斥锁组合使用：// New
- 前言：随着编程语言的发展，Go 还很年轻。它于 2009 年 11 月 10 日首次发布。其创建者Robert Griesemer Rob
- 前言:python数据类型: python数据结构之数据类型.今天我们主要来介绍一些内置函数，比如输入输出，控制，和异常的用法，尤其是输出和
- 在 Go语言中通过调用 reflect.TypeOf 函数，我们可以从一个任何非接口类型的值创建一个 reflect.Type 值。refl
- 学习前言Inception系列的结构和其它的前向神经网络的结构不太一样，每一层的内容不是直直向下的，而是分了很多的块什么是Inception
- 在对excel的操作中，调整列的顺序以及添加一些列也是经常用到的，下面我们用pandas实现这一功能。1、调整列的顺序>>>
- 这几天在做一个数据集，由于不是很熟悉Linux下的命令，所以特地用了强大的python来做。我之前有一个数据集但是我只要里面名称带有comp
- 如何在ADO中使用SQL函数？代码见下：<％Set conn1 = Server.CreateObjec
- 第一种，使用reversed 函数，reversed返回的结果是一个反转的迭代器，我们需要对其进行 list 转换listNode = [1
- 可以采用exec方法注意：使exec不能返回一些变量的值，而且当前的变量值在exec的语句里无效。declare @tempStr
- 有时候，为了获取查询结果的部分数据，需要对变量进行一些处理，在网上查了一圈，只发现了这两个方法：返回查询结果的切片在返回给前端的结果中，通过
- 当我发现要写python的面向对象的时候，我是踌躇满面，坐立不安呀。我一直在想：这个坑应该怎么爬？因为python中关于面向对象的内容很多，
- 1.Go连接LDAP服务通过go操作的ldap,这里使用到的是go-ldap包，该包基本上实现了ldap v3的基本功能. 比如连接ldap
- 一、UPDATE常见用法首先建立测试环境： DROP TABLE IF EXISTS t_test;CREATE TABLE t_
- 偶然从pytorch讨论论坛中看到的一个问题，KL divergence different results from tf，kl dive
- 前段时间做一个小项目，为了同时存储多条数据，其中有一个功能是解析Excel并把其中的数据存入对应数据库中。花了两天时间，不过一天多是因为用了
- 简介视图主要内容：URLconf、HttpRequest对象、HttpResponse1）视图接受Web请求并且返回Web响应2）视图就是一
- 1.文件的写入和读取#!/usr/bin/python # -*- coding: utf-8 -*- # Filename: using_
