出现弹窗引起窗口抖动

最新推荐文章于 2024-01-20 19:48:47 发布
原创 最新推荐文章于 2024-01-20 19:48:47 发布 · 760 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍了一个关于网页布局的小问题：当弹窗显示和隐藏时，Body元素的Padding-right属性会发生变化，导致页面布局错位。文章提供了解决方案，在Body元素中设置Padding-right为0并使用!important确保该样式优先级最高。

一、问题出现原因

当出现弹窗时，body元素中会新增padding-right: 6px;而当弹窗隐藏时，body元素中不会新增padding-right: 6px;这一css属性样式。

二、问题解决方式

在body元素中新增padding-right: 0 !important;这一属性。即：

body {
	padding-right: 0 !important;
}
jquery弹窗提示插件（带抖动）
weixin_33836874的博客
06-09 298
2019独角兽企业重金招聘Python工程师标准>>> ...
解决 ie6 下弹出框随着滚动条不断抖动
weixin_30678349的博客
12-14 202
之前写的弹出框会在ie6下不断抖动,找了很久，终于找到了解决办法： 1.下面用纯css也实现了：（但这种办法有个缺陷，那就是：这会使页面上原有的absolute、relation都变成fixed的效果） 滚动条实际不是视口的 而是body 模拟的 <!DOCTYPE html> <html> <head> <meta http-...
CSS 控制Html页面高度导致抖动问题的原因
weixin_30300523的博客
10-12 721
CSS 控制Html页面高度导致抖动，这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码： html,body{ overflow-y:scroll;}html,body{ overflow:scroll; min-height:101%;}html{ overflow:-moz-scrollbars-vertical;} 已经试验过了...
纯CSS解决滚动条显示和消失时导致页面抖动的问题
weixin_59232910的博客
08-25 2469
我在使用 ElementPlus 时发现，弹出对话框界面后，界面右边的滚动条会消失，进而导致 body 变宽，使整个页面发生抖动。我先在网上搜索有没有合适的办法，但找到的方法都不太适合我的情况。我找到了如下所示的 css，但是对我的页面来说，会挡住顶部导航栏右边的头像。100vw - 100% 计算的是滚动条的宽度。100vw 是浏览器窗口宽度（包括滚动条），100% 是网页宽度（不包括滚动条）。所以这两个值相减，就可以得到滚动条的宽度。使用上面的css的效果是这样的。
弹出模态框的时窗口抖动问题
tangmin的博客
08-23 3671
这个是这两天在写界面的时候发现的一个问题，开始没有重视也不知道是因为模态框引起的，后来仔细看了一下点击弹出模态框的按钮和其他普通按钮的反应是不同的，只有模态框弹出的时候会抖动。找到问题后于是想可不可以解决。很不错的是很快找到了本质问题和解决方法。 问题根源:①在点击按钮弹出模态框的时候body的padding-rignt属性值会增大。再关闭模态框的时候padding-rigt属性值恢复到原先自己...
【playwright】新一代自动化测试神器playwright+python系列课程39_playwright_弹窗处理
qq_35948955的博客
01-20 1537
目前的系统中，在应用错误或修改数据、删除数据时都会弹出提示信息窗口，弹出的警告窗口有的是可以直接定位窗口上的元素的，有的是不能定位的。如果需要以提示信息来断言的话，直接在on()方法的lambda函数中使用assert断言会报错，可以单独定义一个函数，在函数内获取提示信息并断言，再把函数对象传入on()方法中。我们先来了解一下弹窗的分类，弹窗通常分为3种，分别为alert，confirm，promot。dialog 对象有属性和方法来实现点击弹窗中的确定、取消或者获取弹窗上的提示信息/;
Cesuim 解决窗口抖动问题
qq_37820215的博客
07-25 687
https://www.jianshu.com/p/85917bcc023f 配置完之后，不止有页面上的白色边界，还有窗口抖动问题，加了下面代码之后问题解决了！！ html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidd...
性能优化及相关问题
qt的博客
02-26 361
性能优化 1.CDN的用法是什么？什么时候用到 2.如何优化dom操作的性能。 3.单页面应用有什么SEO方案？ 相关问题 正则表达式. 发展及应用：前期，正则表达式被广泛地应用到各种UNIX或类似于UNIX的工具中，如：Perl内部集 成了正则表达 位，在主流的计算机开发语言中（delphi、Scala、PHP、C#C++ JavascriptRuby以及Python 正则表达式的特点是： 1.灵活性、逻辑性和功能性非常强 2.可以迅速地用极简单的方式达到字符串的复杂控制 3.对于刚接触的人来说，比较晦
IE6 CSS引起的卡死陷阱
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
11-05 3181
前两天某个网页在其他浏览器中一切正常，在该死的IE6下居然卡死，关闭IE6，其他所有打开的页面均关闭。查来查去，原来是下面第一种情况引起。同时也发现其他的卡死陷阱，现列于此处，目的是让其他网友少走弯路。1、expression语句。如：onmouseover:expression语句。2、CSS中的某些滤镜。如：，当一个PNG图为24位（不带Alpha透明通道）时，也会引起卡死。3、css里面*各
前端开发PC端页面，出现页面抖动原因及解决办法
热门推荐
weixin_45923100的博客
01-11 1万+
问题描述： 前端开发PC端页面，出现页面抖动，屏幕不停闪动 原因分析： 原因是，每台电脑的尺寸大小不一样。当页面获取的数据跟电脑屏幕刚好一直时，他就会出现这个问题，伸展/收缩，伸展收缩，出现滚动条，隐藏滚动条，一直在不停的变换才导致页面一直闪。这个场景其实可以模拟出来，我们把一个页面先缩放/扩大到跟屏幕产不多大的时候，找到这个页面的样式。加个margin-bottom,把数值一直加，加到跟屏幕一样大小的时候，他就会闪动了。（我不会做动图gif,所以那个闪动的效果放不上了，可以自行试一下） 解决方案
解决element-ui中MessageBox 弹框时滚动条导致布局抖动
~Mysunny的博客
10-23 2024
html { width:100vw; overflow-x:hidden; } body{ padding-right: 0px !important; }
CSS3 animation 让弹框从上弹出，然后有个抖动的效果
粪球的生活
05-20 9272
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css"&gt;/* 弹框样式 */.bom_bg{width: 100%;height:100%; background:rgba(0, 0, 0,0.85); p
Arco 属性
虎康的博客
12-27 3980
为解决产品中的体验问题, 同时促进设计部门和研发部门之间协作, 本系统选择ArcoDesign作为开发者之间沟通的语言框架，使用vue3+TS结合的模式进行开发。线宽端点类型拐角类型spin是否旋转size尺寸。
css——点击按钮时页面会出现抖动
weixin_43551242的博客
03-13 2267
vue结合element el-button点击按钮时页面会闪烁出现抖动原因： .该元素设置了margin或padding或者border（这种情况会引起重排和重绘https://zhuanlan.zhihu.com/p/148825597） .解决方法：添加属性box-size：border-box css3 box-size属性允许您以特定的方式定义匹配某个区域的特定元素。 eg：假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有
纯css简单的警告框加抖动效果
crystal_tyan
02-15 3167
这种效果的警告框，出错了会抖动 .alert-box { width: 400px; border-style: outset; position: relative; color:#555; border-radius:10px; font-family:Tahoma,Gene
【css快速实现--抖动提醒】
qq_56202505的博客
10-31 3937
1、首先我们把apply-shake以:class的形式绑定在input框在上，为其添加抖动效果，再通过v-model双向绑定一个name属性。3、其次再在方法中，实现通过判断name值是否为空，转换shakeTaxtName的一个状态，为空的话就转化为true，于是就有了抖动的效果。这个方法很有趣，我也是在抖音关注的程序员小山与bug这位博主发布的视频中所学习到的，大家可以去关注关注，有很多有趣的知识值得我们去学习。这样一个具有抖动效果的页面就实现啦，运用的场景有很多，大家可以多多尝试。
Bootstrap 使用弹窗 Modal 时页面抖动
灵台方寸山斜月三星洞
05-15 931
弹出 Modal 时页面抖动， 原因有二： 一、弹窗一出 .modal-open 会添加到body上，并且改变其尺寸 弹窗前： <body class="container"> 弹窗后： <body class="container modal-open" style="padding-right: 32px;"> 二、弹窗一出页面的滚动条会被隐藏 如果页面原本没有...
打开计算机窗口抖动是什么原因,教你电脑屏幕抖动是什么原因及如何解决
weixin_35793018的博客
07-27 8665
最近有用户反馈，遇到了抖屏的问题，抖屏其实就是电脑屏幕抖动，看会儿资料你就会头晕眼花，其实电脑电脑屏幕抖动不仅影响我们的视力，且还会对系统造成损害。接下来小编教你电脑屏幕抖动是什么原因及如何解决吧。电脑屏幕抖动是什么原因及如何解决：一、调整屏幕分辨率1、在桌面空白处右键。2、点击“屏幕分辨率”。3、打开“屏幕分辨率”窗口。#f#4、点击打开“高级设置”。5、切换到“监视器”页面，调整屏幕的刷新频率...
antd Popover 定位抖动
wangwffgqeg的专栏
01-18 1803
antd Popover 定位抖动是因为transitionName 动画导致的。 可以自定义transitionName 或<Popover transitionName={''}/> 引用https://github.com/ant-design/ant-design/issues/27102
ant design vue 中的 a-model弹窗 会造成窗口抖动
最新发布
03-18
### 关于 Ant Design Vue A-Modal 弹窗导致窗口抖动的解决方案 在处理 Ant Design Vue 的 `a-modal` 组件时，如果遇到弹窗打开或关闭过程中页面发生抖动的情况，通常是因为模态框显示时改变了文档流中的滚动条状态。这种现象可以通过调整 CSS 和 JavaScript 来缓解。 #### 方法一：修改全局样式以防止滚动条变化引起的抖动 当模态框被激活时，Ant Design Vue 默认会为 `<body>` 添加类名 `.ant-scrolling-effect` 或类似的样式控制。这可能导致浏览器重新计算布局并引发视觉上的抖动效果。为了消除这一问题，可以自定义全局样式来锁定背景滚动行为： ```css .modal-open { overflow-y: hidden !important; } body { padding-right: 0 !important; } ``` 上述代码片段通过设置 `overflow-y: hidden` 防止垂直方向上出现额外滚动条[^1]，从而避免因滚动条宽度改变而导致的内容偏移。 #### 方法二：动态管理 body 样式 另一种方法是在组件内部手动操作 DOM 节点，在展示模态框之前临时禁用页面滚动功能，并恢复原有状态作为清理工作的一部分： ```javascript export default { methods: { showModal() { document.body.style.overflowY = 'hidden'; this.visible = true; }, handleCancel() { document.body.style.overflowY = ''; this.visible = false; } }, data() { return { visible: false }; } }; ``` 此实现方式确保每次调用 `showModal()` 函数前都会隐藏主体区域内的滚动条；而一旦用户点击取消按钮或者完成其他交互动作，则立即释放该约束条件[^3]。 #### 方法三：针对特定场景应用防抖技术（适用于复杂情况） 对于某些特殊情况下仍然存在性能瓶颈的问题——比如频繁触发重绘/回流的操作可能间接影响到整体表现力——则考虑引入 lodash 库里的 debounce 工具函数或者其他类似机制对事件处理器加以优化: 需要注意的是, 如果单纯依赖 v-model 实现双向数据绑定的话, 即使尝试采用防抖策略也可能收效甚微因为其本质原因在于框架本身的设计哲学所致[^2]. 因此建议尽可能减少不必要的监听器数量以及降低更新频率. --- ### 总结 综合以上三种途径可有效应对由 ant-design-vue 所产生的 modal 抖动难题. 推荐优先选用第一种静态 css 方案因其简单高效易于维护; 若项目需求较为独特再酌情采纳其余两种动态手段予以补充完善.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值