弹出模态框的时窗口抖动问题

最新推荐文章于 2024-01-16 10:52:20 发布

tangminfx

最新推荐文章于 2024-01-16 10:52:20 发布

阅读量3.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/tangminfx/article/details/81975792

版权

本文详细介绍了在界面设计中遇到模态框弹出导致页面抖动及滚动条消失的问题，通过分析原因并提供解决方案，成功解决了这一技术难题。文章着重于CSS样式调整，包括overflow属性的使用和body padding的设置，最终实现了问题的有效解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是这两天在写界面的时候发现的一个问题，开始没有重视也不知道是因为模态框引起的，后来仔细看了一下点击弹出模态框的按钮和其他普通按钮的反应是不同的，只有模态框弹出的时候会抖动。找到问题后于是想可不可以解决。很不错的是很快找到了本质问题和解决方法。

问题根源:①在点击按钮弹出模态框的时候body的padding-rignt属性值会增大。再关闭模态框的时候padding-rigt属性值恢复到原先自己设定的 ②右边的滚动条也会消失，因为代开模态框后body会增加一个class=“modal-open”，而这个madal-open的样式中有一个overflow：hidden，而我们需要的滚动条样式恰恰是overflow：scroll；样式被覆盖掉了，那就再覆盖回来。

那么现在我只在样式里添加了如下代码就可以了：

   .modal-open{
overflow-y: scroll;
}
body{
   padding-right:15px!important;
   }

问题解决了

原文链接https://blog.youkuaiyun.com/fd214333890/article/details/80274160

这位博主写的很仔细了，我就是在他的指引下解决的问题，我只是做一个笔记，具体的知识请看博主原帖。