使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题

问题：

在使用element-ui的el-dialog时，由于遮罩层的出现，导致页面的滚动条隐藏，从而使页面出现闪动的效果。

解决过程

当遇到这个问题时，我想能不能是滚动条悬浮于页面上，及脱离文本流，从而不影响页面的宽度，于是我百度时发现了这个css属性，及在body或者盒子上添加

body:{overflow:overlay
}

这个可以使页面滚动条的隐藏和显示影响页面的宽度，但是这个问题存在兼容性问题，且是一个被‘废弃’的属性，于是我就放弃了这个想法。
于是我继续翻看element-ui的文档，发现el-dialog中有一个属性，scroll-lock，我尝试将scroll-lock设置为false，果然，能行，且没有兼容性问题，但是我现在不可能一个个项目中的dialog中添加
scroll-lock=false，于是我就把这段代码放在main.js里修改默认值

import ElementUI from 'element-ui';
ElementUI.Dialog.props.lockScroll.default = false;

这下全局都会发生改变，闪动问题解决，但这只是个折中的方案，如果有更好的欢迎在评论区中提出

使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题相关推荐

java弹框刷新原页面_JavaScript:关闭弹出窗口时刷新父窗口
说明: 关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息,即用户通过window对象的open()方法打开一个新窗口(子窗口),当用户在该子窗口中进行了数据库操作(如数据添加.修 ...
实现弹出窗口并转到另一个页面
实现弹出窗口并转到另一个页面 string strScript = ""; strScript += "<SCRIPT language=\ ...
ie11弹出层后，滚动条消失，页面固定不能动
弹出框出现之后,浏览器会给body增加内联样式:style="overflow:hidden",弹出框关闭后,样式依然在,所以需要手工修改样式 DOM操作:document.bod ...
android 弹窗ui,Android 弹出窗口与对话框 UI设计
左图: Android 自带的日期选择弹窗; 右图: Android 自带的时间选择弹窗. 左图: Android 日历中的重复选择; 右图: Chrome 中的打印. 干净简洁的布局与有趣儿又引 ...
jquery 弹出窗口_jQuery弹出窗口和工具提示窗口动画效果
jquery 弹出窗口 In this tutorial, we are going to discuss about a jQuery plugin for responsive and acces ...
vc 只有顶级窗口可以弹出窗口_如果你刚换了新电脑，这几个地方记得设置一下，电脑可以多用几年...
现在电脑在生活中已经很常见了,无论是办公还是在生活中都会用到它,但是刚买了的电脑的小伙伴都不会保护电脑,过了几个月后电脑就出现卡顿或者死机,这样就会缩短电脑的使用寿命. 今天就教教大家如何正确的使用电 ...
wpf 如何设置弹出窗口必须关闭才能打开其他软件_新电脑到手后，这3项定要这样设置，能让你的电脑多用三年！...
有用户说到,自己的新电脑刚买没多久,开机速度就如同龟速一般,关于导致这问题发生的原因咱们暂时不探讨.但新电脑到手,我们是不是需要做点什么呢?让电脑变得更好使呢?大家或许都知道,新电脑到手后需对Wind ...
swing退出子窗口事件_如何创建有效的退出弹出窗口？
如何创建有效的退出弹出窗口? 下面的退出弹出窗口为电子邮件列表增加了4153个订阅者: 这个提供折扣的弹出窗口,帮助Storiarts在60天之内挽回了96个弃单客户,从而额外创造了5000美元的销售 ...
html点击按钮弹出窗口_电脑桌面总是弹出广告怎么办？教你2种方法，轻松解决...
平常我们在使用电脑时,总会出现很多的弹窗广告,点关闭按钮直接就进入了广告,每次都要浪费时间来关闭广告页面,非常的烦人. 不过最近小编发现了关闭电脑广告弹窗的方法,我们一起来看一看吧! 一.启用弹出窗口 ...

使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题

问题：

解决过程

使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题相关推荐

最新文章

热门文章