AI 助理
文档备案控制台
开发者社区 彭世瑜的博客 文章 正文

element-plus：Dialog 对话框在有滚动条的页面会抖动

2023-04-14 1279
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： element-plus：Dialog 对话框在有滚动条的页面会抖动

image.png

查看元素发现，动态增加了一个style标签

<body class="el-popup-parent--hidden" style="width: calc(100% - 15px);">
</body>

解决方法

增加一个参数lock-scroll="false" ,解除在 Dialog 出现时 body 滚动锁定

<el-dialog :lock-scroll="false">
</el-dialog>

参考

https://element-plus.gitee.io/zh-CN/component/dialog.html

[Style] el-popup-parent–hidden 会携带 width: calc(100% - 8px) 样式 #9937


编程达人
目录
相关文章
Boale_H
|
移动开发 前端开发 iOS开发
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端H5的复制功能在ios端的兼容性问题
Boale_H
1594 0
问号云
|
5月前
|
人工智能 安全 API
5分钟搭建专属AI知识库！OpenClaw阿里云/本地部署+飞书智能知识库实战+百炼API配置指南
在2026年的AI生态中，单纯的对话模型早已无法满足深度使用需求，AI+私有知识库才是真正能落地、能复用、能持续进化的核心形态。无论是个人沉淀经验、团队共享文档、企业管理技术资料，还是把OpenClaw训练成专属智能助手，一套可问答、可检索、可溯源的AI知识库，都能让效率呈指数级提升。
问号云
3813 5
fruge365
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
fruge365
960 0
夏天49597
|
前端开发 JavaScript UED
React 滚动条组件 Scrollbar
本文介绍了在 React 中创建和使用滚动条组件的方法。首先，通过设置 `overflow: auto` 等 CSS 属性实现基础滚动功能。接着，推荐了如 `react-custom-scrollbars` 和 `react-perfect-scrollbar` 等第三方库以增强滚动条的功能与外观。针对常见问题，如样式不一致、无法正常工作及性能瓶颈，提供了相应的解决方案，包括自定义样式、确保容器高度和优化渲染逻辑。最后，强调了避免滚动事件绑定错误和不合理嵌套滚动的重要性，帮助开发者打造流畅、美观的用户界面。
夏天49597
977 16
baker_zhuang
Threejs用切线实现模型沿着轨道行驶
这篇文章详细介绍了如何使用Three.js让一个模型沿着预定的曲线路径移动，并保持模型的方向始终沿着路径的切线方向，提供了实现这一效果的具体代码和步骤。
baker_zhuang
1149 1
Threejs用切线实现模型沿着轨道行驶
小猫娃来啦
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
小猫娃来啦
7555 0
chnjames
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器，包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构，用户可以通过下拉选择树形节点，实时搜索节点，且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现，帮助开发者快速集成此功能。
chnjames
6599 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
游客zi3qmblbcdexu
|
存储 JavaScript 安全
组件通信——provide 和 inject 实现爷孙组件通信
组件通信——provide 和 inject 实现爷孙组件通信
游客zi3qmblbcdexu
660 2

热门文章

最新文章

  • 1
    视频码率、分辨率、帧率的关系
  • 2
    又一个项目开源，阿里已成为中国开源的关键力量？
  • 3
    性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线
  • 4
    MaxCompute问答整理之9月
  • 5
    RTMP、RTSP、HTTP视频协议详解（附：直播流地址、播放软件）
  • 6
    【YOLOv8改进 - 注意力机制】Triplet Attention：轻量有效的三元注意力
  • 7
    Python PIL远程命令执行漏洞复现(CVE-2017-8291 CVE-2017-8291)
  • 8
    新年快乐 ~
  • 9
    50个优秀的名片设计作品欣赏
  • 10
    WebBrowser控件使用详解
  • 1
    阿里云 ESSD AutoPL 云盘完整指南：性能分层、计费规则与控制台操作
    30
  • 2
    同城O2O系统开发趋势分析：本地生活数字化下的新机会
    22
  • 3
    【AI】Agent 全栈进阶｜系统化学习路线专题
    75
  • 4
    创业团队开发聊天应用，需要解决哪些 IM 技术难题？
    27
  • 5
    互联网医院系统开发：HIS接口、电子病历与处方数据同步设计
    24
  • 6
    风控系统如何从“管交易”延伸到“管IP”？IP风险画像落地指南
    24
  • 7
    【AI时代软件项目管理系列】2. 从工具到数字员工：AI 在项目团队中的角色演进
    31
  • 8
    阿里云服务器弹性临时盘是什么？哪些ECS支持弹性临时盘？
    25
  • 9
    跨病种共病关联挖掘：高血压 + 糖尿病 + 肾病，大模型因果推理疾病关联分析实践.192
    31
  • 10
    Java编程规范避坑指南：阿里开发手册15条强制规约实战解析
    23

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！