弹窗滚动失效的根本原因是滚动上下文被切断，必须确保父容器有明确高度、正确设置max-height而非height，并在可滚动子元素上应用overscroll-behavior: contain。
弹窗内容设了 overflow-y: auto 却滚不动，不是样式漏写了，而是滚动上下文被父级或定位方式切断了——关键得让浏览器知道“哪里该滚、能滚多高”。
为什么 overflow-y: auto 在移动端弹窗里经常失效
常见现象：弹窗一展开，内容直接撑出屏幕底部，拖拽没反应，滚动条压根不出现。
-
position: fixed或transform: translate()的弹窗容器，若没配max-height，浏览器无法推导可滚动区域高度 -
body或html被设了height: 100%+overflow: hidden，会把子元素的滚动事件吞掉 - 微信小程序中，
page根节点不支持直接加overflow，必须靠中间 wrapper 控制 - iOS Safari 下，弹窗滚动到底后继续拖，底层页面跟着动（滚动穿透），浏览器可能因此抑制内部滚动条渲染
必须显式设置 max-height，别用 height
height 是刚性约束，小屏下容易顶部被切、内容不可见；max-height 才是安全解法——内容少时不占多余空间，多了才触发滚动。
- 推荐写法：
max-height: calc(100vh - 120px)（减去标题、按钮等固定区域高度） - 避免
height: 80vh：键盘弹出时 iOS 会重算vh，导致弹窗突然跳变或截断 - 如果用了
transform: translate(-50%, -50%)居中，必须把这个max-height加在 transform 容器上，否则 transform 会让overflow失效 - uni-app 的
u-popup或 Element Plus 的.el-dialog__body，不要直接设 overflow，先包一层<div class="popup-content">再加样式
防滚动穿透：overscroll-behavior: contain 必须加在可滚动子容器上
这个属性不是加在弹窗根元素上就完事了——它只对**实际发生滚动的元素**生效。如果容器本身没溢出、没设 max-height 和 overflow-y: auto，那这行 CSS 就是摆设。
立即学习“前端免费学习笔记（深入）”；
- 正确位置：
.popup-content、.chat-list、.dialog-body这类有明确高度限制且内容真实溢出的元素 - 值选
contain，不是none：保留 iOS 下拉回弹反馈，但阻止穿透到背后页面 - 如果弹窗里嵌了
el-table或自定义scroll-view，它们的 wrapper 也得单独加这一行 - 注意兼容性：
overscroll-behavior在 iOS 16+ / Android Chrome 90+ 已稳定支持，旧版本需 JS 补充（如监听 touchmove + preventDefault）
移动端遮罩层要拦截 touchmove，但别误杀弹窗内滚动
只给遮罩层加 @touchmove.prevent（Vue）或 catchtouchmove（小程序）不够——用户手指划在遮罩上时，底层页面仍可能响应。
- 遮罩层必须加
touch-action: none，防止手势冒泡 - 但弹窗内容区要保持
touch-action: auto（默认值），否则内部轮播图、长列表拖拽会卡死 - 更稳妥的做法：弹窗激活时，给
body加style="overflow: hidden"，同时用 JS 记录当前scrollTop；关闭时恢复并window.scrollTo(0, scrollTop) - 注意 iOS Safari：仅设
body { overflow: hidden }无效，必须配合html { position: fixed; top: -${scrollTop}px }才真正钉住视口
最易被忽略的一点：所有滚动控制都依赖“高度可计算”。只要任意一级父容器（比如 .modal-overlay）没设 position: fixed + top/left/right/bottom: 0，或者 html、body 缺少 height: 100%，整个滚动链就断了——这时再调 overflow 和 max-height 都是徒劳。
