当前位置: 首页 > news >正文

解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

问题描述:

在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的布局,且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点;
后来我找了一下页面具体样式变化,发现弹框在出现时,会对页面的滚动条进行处理,给body增加额外的样式类;可以找到样式类重写,方法1,但是容易影响页面整体不急,不推荐。更直接的办法参考 方法2,直接不让遮罩层罩盖滚动条,滚动条正常展示,但是这样的话即使有遮罩层用户也能正常拉动滚动条;

解决方法:

方法1

  1. 在全局设置 body 的 padding-right: 0 !important;不推荐,虽然可以解决问题,但是影响了页面的布局效果;

方法2

  1. main.js中,找到引入element的地方,举个例子
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";Element.Dialog.props.lockScroll.default = false;

相关文章:

解决el-dialog弹出时,页面抖动,右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)

问题描述: 在弹出el-dialog时,会发现弹出框弹出时,页面会抖动,滚动条被遮罩层覆盖直接没有滚动条了,导致页面缩小了几个像素点(滚动条的宽度);体验感不好,会影响到页面的…...

【Rust 基础篇】Rust 属性宏:定制你的代码

导言 Rust是一门现代的、安全的系统级编程语言,它提供了丰富的元编程特性,其中属性宏(Attribute Macros)是其中之一。属性宏允许开发者在代码上方添加自定义的属性,并对代码进行定制化处理。在本篇博客中,…...

2023-08-04力扣今日三题

链接&#xff1a; 剑指 Offer 35. 复杂链表的复制 题意&#xff1a; 如题 解&#xff1a; 看题研究了好一阵&#xff0c;指针map 实际代码&#xff1a; #include<bits/stdc.h> using namespace std; class Node { public:int val;Node* next;Node* random;Node(in…...

从HTTP代理到Socks5代理:网络安全与爬虫的进化之路

一、HTTP代理&#xff1a;简介与特点 HTTP代理是一种最早的代理技术&#xff0c;通过HTTP协议转发网络请求。它能够隐藏用户的真实IP地址&#xff0c;实现匿名访问&#xff0c;为爬虫应用提供了最基本的代理功能。 HTTP代理只支持TCP协议&#xff0c;对于实时数据传输和UDP协议…...

数学建模-元胞自动机

clc clear n 300; % 定义表示森林的矩阵大小 Plight 5e-6; Pgrowth 1e-2; % 定义闪电和生长的概率 UL [n,1:n-1]; DR [2:n,1]; % 定义上左&#xff0c;下右邻居 vegzeros(n,n); % 初始化表示森林的矩阵 imh ima…...

化学合成有机化学 | 逆合成分析软件/数据库汇总

化合物逆合成路线设计软件是一类用于辅助化学家设计化合物合成路线的工具。这些软件通常基于化学知识和反应数据库&#xff0c;能够根据目标化合物的结构和性质&#xff0c;提供合成路线的建议和优化方案。以下是一些常见的化合物逆合成路线设计软件&#xff1a; IntSynth&…...

无涯教程-jQuery - Selectable选择函数

选择能力功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用选择能力功能。用光标绘制一个框以选择项目。按住Ctrl键可进行多个不相邻的选择。 Select able - 语法 $( "#selectable" ).selectable(); Select able - 示例 以下是一个简单的示例&…...

MySQL修改root密码

1、使用set password命令 mysql -uroot mysql> use mysql mysql> set password for rootlocalhost PASSWORD(newpass); mysql> flush privileges; mysql> select user,host,password from user; mysql> exit 2、使用update user表 mysql -uroot mysql> …...

vue获取近七天、月份、年份的起始日和结束日

vue获取近七天的起始日和结束日 例如&#xff1a;startDate: 2023-07-29 endDate: 2023-08-04 data() {return {startDate: null,endDate: null} }, mounted() {this.calculateDateRange(); }, methods: {calculateDateRange() {var currentDate new Date();var startDate …...

android AIDL 学习使用

在android studio 2023.2中使用 1、在buidl.gradle增加以下配置&#xff0c;然后同步。不增加这些配置&#xff0c;创建aidl时显示为灰色&#xff0c;不能创建 buildFeatures {compose true// Disable unused AGP featuresbuildConfig falseaidl truerenderScript falseresVal…...

学习笔记|C251|STC32G单片机视频开发教程(冲哥)|第三集:开发环境搭建和程序下载

文章目录 1.STC-ISP软件的下载2.STC32手册下载3.PDF阅读器下载4.学会PDF阅读器查阅手册5.跟着手册搭建C251开发环境Tips:如何同时安装Keil的C51、C251和MDK 6.程序包的下载7.第一个工程的编译和下载 原作者/主讲人&#xff1a;冲哥 原始视频地址 1.STC-ISP软件的下载 STC-ISP …...

【数据可视化】(二)数据探索组件

目录 0.简介 一、数据模式与数据组织 1、数据的定义 2、数据库的定义 3、什么是数据模式? 4、数据模式举例 5、什么是数据纲要? 6、数据组织的层次 二、矢量数据 1、什么是矢量数据?...

Go to Play Maimai DX 2023牛客暑期多校训练营5 G

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一长度为n的仅由1,2,3,4组成的数组和一整数k&#xff0c;求一个最短的区间使得1,2,3,4至少各有一个&#xff0c;且4的数量>k 1<k<n<1e5 思路&#xff1a;用双指针l&#xff0c;r维护合法区间&…...

HTML基础铺垫

&#x1f60a;HTML基础铺垫 &#x1f47b;前言&#x1f4dc;HTML文档结构&#x1f3ad;头部head&#x1f94f;标题title标记&#x1f94f;元信息meta标记 &#x1f3ad;主体body&#x1f94f;body标记&#x1f94f;body标记属性 &#x1f3ad;HTML基本语法&#x1f94f;标记类型…...

【Vue3项目实战】vue3项目基于el-menu封装左侧菜单栏组件

文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、核心思路三、全量代码3.1 文件目录结构3.2 /sidebar/index.vue 中3.3 /sidebar/sidebarItem.vue 中3.4 路由表结构 四、代码讲解五、SVG组件六、系列文章友链1、[配置husky、stylelint、commitlint&#xff0c;实现git提…...

MySQL正则表达式检索数据

目录 一、使用正则表达式进行基本字符匹配 1.使用regexp关键字 2.使用正则表达式 . 二、进行OR匹配 1.为搜索两个串之一&#xff0c;使用 | 2.匹配几个字符之一[] 3.匹配范围 4.匹配特殊字符 过滤数据允许使用匹配、比较、通配符操作来寻找数据&#xff0c;但是随…...

vite+ts+vue3 prettier.config.js 不生效问题解决

vitetsvue3 prettier.config.js 不生效问题解决 我在做项目的时候 我发现 我的vscode prettier插件 坏了 我自动格式化代码也开了 就是不给我格式化, 我已经写了prettier.config.js这个配置 也 npm i prettier 下载了就是不生效 后来我发现是因为 这个package.json 里的 “ty…...

Java源码规则引擎:jvs-rules 8月新增功能介绍

JVS-rules是JAVA语言下开发的规则引擎&#xff0c;是jvs企业级数字化解决方案中的重要配置化工具&#xff0c;核心解决业务判断的配置化&#xff0c;常见的使用场景&#xff1a;金融信贷风控判断、商品优惠折扣计算、对员工考核评分等各种变化的规则判断情景。 8月是收获的季节…...

2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议&#xff08;IARCE 2023&#xff09; 会议时间&#xff1a;2023年10月27 -30日 召开地点&#xff1a;中国成都 大会官网&#xff1a;www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…...

14.2.2 【Linux】software, hardware RAID

磁盘阵列分为硬件与软件。所谓的硬件磁盘阵列是通过磁盘阵列卡来达成阵列的目的。磁盘阵列卡上面有一块专门的芯片在处理 RAID 的任务&#xff0c;因此在性能方面会比较好。在很多任务 &#xff08;例如 RAID 5 的同位检查码计算&#xff09; 磁盘阵列并不会重复消耗原本系统的…...

Intv_ai_mk11 C语言接口调用教程:为嵌入式设备注入AI对话能力

Intv_ai_mk11 C语言接口调用教程&#xff1a;为嵌入式设备注入AI对话能力 1. 引言&#xff1a;为什么嵌入式设备需要AI对话能力 想象一下&#xff0c;你的智能家居设备不仅能执行命令&#xff0c;还能像朋友一样自然交流&#xff1b;工业设备在出现异常时&#xff0c;能用人类…...

HunyuanVideo-Foley效果展示:RTX4090D优化版生成的城市街道音效实测

HunyuanVideo-Foley效果展示&#xff1a;RTX4090D优化版生成的城市街道音效实测 1. 音效生成技术的新突破 当你在观看一部电影或短视频时&#xff0c;那些细微的环境音效——脚步声、汽车鸣笛、风吹树叶的沙沙声&#xff0c;往往能带来最真实的沉浸感。传统上&#xff0c;这些…...

钛投标 × 阿里云官方合作:2026 合规招投标 AI 工具新标杆,周年福利同步上线

前言 随着 2026 年《招标投标法&#xff08;修订草案&#xff09;》与涉密项目监管新规全面实施&#xff0c;企业在招投标数字化工具选型上&#xff0c;已从 “追求效率” 转向 “合规优先、安全可靠”。在此背景下&#xff0c;国内招投标 AI 标杆产品钛投标正式宣布与阿里云官…...

RWKV7-1.5B-g1a开发者手册:curl API调用示例+日志排查+health接口验证

RWKV7-1.5B-g1a开发者手册&#xff1a;curl API调用示例日志排查health接口验证 1. 平台简介 rwkv7-1.5B-g1a 是基于 RWKV-7 架构的多语言文本生成模型&#xff0c;特别适合以下场景&#xff1a; 基础问答文案续写简短总结轻量中文对话 这个模型在单卡24GB显存的GPU上就能轻…...

rasterizeHTML.js 终极指南:跨浏览器HTML到Canvas渲染完整教程

rasterizeHTML.js 终极指南&#xff1a;跨浏览器HTML到Canvas渲染完整教程 【免费下载链接】rasterizeHTML.js Renders HTML into the browsers canvas 项目地址: https://gitcode.com/gh_mirrors/ra/rasterizeHTML.js rasterizeHTML.js 是一款强大的 JavaScript 库&…...

在Windows 11上为Intel Iris Xe显卡配置PyTorch CPU环境:从Anaconda到成功验证

1. 为什么选择PyTorch CPU版本&#xff1f; 很多刚入门深度学习的同学可能会疑惑&#xff1a;为什么我的Intel Iris Xe显卡不能用GPU加速&#xff1f;其实这个问题涉及到硬件架构的差异。NVIDIA显卡之所以能加速深度学习计算&#xff0c;是因为它们内置了专门设计的CUDA核心&am…...

VL01N/VL02N用户必看:如何给你的交货单行项目‘贴’上专属信息标签?

VL01N/VL02N用户必看&#xff1a;如何给你的交货单行项目‘贴’上专属信息标签&#xff1f; 想象一下&#xff0c;你正在VL01N界面创建外向交货单&#xff0c;突然发现标准界面缺少客户要求的特殊包装代码。你不得不切换到Excel表格核对&#xff0c;再返回系统手工填写备注——…...

深度学习回归任务中的五大误差指标解析(RMSE、MSE、MAE、MAPE、SMAPE)

1. 深度学习回归任务为什么需要误差指标&#xff1f; 做深度学习回归任务时&#xff0c;我们经常会遇到这样的困惑&#xff1a;模型训练好了&#xff0c;但怎么判断它到底好不好&#xff1f;这时候误差指标就是我们的"裁判"。想象一下&#xff0c;如果没有这些指标&a…...

【技术解析】BAN——双线性注意力网络在视觉问答中的高效应用与优化

1. 双线性注意力网络&#xff08;BAN&#xff09;为何能成为视觉问答的利器 视觉问答&#xff08;VQA&#xff09;任务需要同时理解图像内容和自然语言问题&#xff0c;这对模型的跨模态交互能力提出了极高要求。传统协同注意力机制虽然能分别捕捉视觉和文本特征&#xff0c;但…...

Midscene.js:用自然语言重新定义跨平台UI自动化测试

Midscene.js&#xff1a;用自然语言重新定义跨平台UI自动化测试 【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene 想象一下&#xff0c;你只需要用自然语言描述&qu…...