必须设max-height才能触发滚动，overflow-y:auto配合动态calc(80vh-120px)或css变量控制高度，包裹div设样式而非直接作用于.el-dialog__body，并统一滚动条样式、加overscroll-behavior:contain防穿透。
弹窗内容区必须设 max-height 才能触发滚动
没高度限制，overflow 就是摆设。Element Plus 的 el-dialog 默认不设高度，内容一多就撑开整个弹窗，底部按钮直接被顶出视口。
关键不是加 overflow: auto，而是先锁住内容区最大可用高度：
-
max-height要基于视口动态计算，比如calc(80vh - 120px)（减去标题、footer 高度） - 更稳妥的做法是用 CSS 变量传入：根节点定义
--dialog-body-max-height: calc(80vh - 120px);，内容区直接用max-height: var(--dialog-body-max-height); - 避免写死像素值，尤其当弹窗有可折叠区域或响应式 footer 时，固定数字会错位
overflow-y: auto 和 overflow: scroll 别混用
overflow: scroll 会强制显示滚动条，哪怕内容根本没溢出——在 macOS 或启用了“自动隐藏滚动条”的系统里，它反而占位、干扰布局。
真正该用的是：
-
overflow-y: auto：只在纵向溢出时显示滚动条，干净且符合用户预期 -
overflow-x: hidden：防横向滚动（尤其表单字段长文本容易意外换行或撑宽） - 别对整个
el-dialog__body直接设overflow，而要包裹一层div再设，否则可能影响 Element Plus 内部 padding 或 transition
滚动条样式统一必须用 ::-webkit-scrollbar + scrollbar-width
Chrome/Safari 用 ::-webkit-scrollbar 系列伪元素，Firefox 用 scrollbar-width 和 scrollbar-color，两者缺一不可。
常见漏掉的点：
- 只写了 Webkit 样式，Firefox 下还是原生丑 scrollbar
-
scrollbar-width: thin在 Firefox 中仅支持auto/thin/none，不能写像素值 - Webkit 里
::-webkit-scrollbar-track不设背景色，滚动条轨道会透出父容器底色，显得脏 - 建议统一加
scrollbar-gutter: stable，防止滚动条出现/消失时内容左右晃动
移动端弹窗滚动穿透必须加 overscroll-behavior: contain
iOS 或 Android 上，弹窗内容滚到顶/底再拖，底层页面跟着动——这不是 JS 事件没阻止，是浏览器默认滚动链行为。
只需一行 CSS 解决：
- 给弹窗内容容器加
overscroll-behavior: contain（兼容性已覆盖 iOS 16+/Android Chrome 90+） - 不要只靠
touch-action: none或preventDefault，它们治标不治本，且可能误杀正常手势 - 如果弹窗里嵌了
el-table或el-scrollbar，记得在它们的 wrapper 上也加，否则内部表格滚动到底仍会穿透
滚动逻辑本身简单，但真正卡住人的永远是高度怎么算、滚动条怎么不闪、移动端怎么不穿帮——这些细节不处理，用户第一眼就感知到“这个弹窗不太稳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
