overflow-y: scroll 强制始终显示垂直滚动条，避免 ios 弹窗卡顿和缩放后滚动条消失；需搭配 max-height（分屏适配）、overscroll-behavior 阻断穿透，并约束内部 img、input、url 等破窗元素。
overflow-y: scroll 必须显式写死，别信 auto
很多弹窗在 iPhone 上一拉就卡住、缩放后滚动条消失，根本原因是用了 overflow-y: auto。浏览器在缩放或动态内容插入时，无法稳定判断“是否溢出”，导致滚动行为时有时无。这不是 bug，是 auto 本身的语义缺陷——它只在内容真超了才显示滚动条，而小屏下“超没超”本身就很模糊。
正确做法是放弃条件判断，强制启用垂直滚动：
-
overflow-y: scroll必须写在弹窗主体容器上，且不能被媒体查询覆盖或 JS 动态删掉 - 搭配
overflow-x: hidden，避免长 URL 或代码块意外触发横向滚动 - 不要加
!important，但要确保它在样式层中不被其他规则（比如第三方 UI 库）覆盖
max-height 要用 vh 单位，且留出系统空间
写成 max-height: 80vh 看似合理，但 iOS 键盘弹出时会把 vh 压缩到极小值，导致弹窗直接塌缩成一条线。更糟的是，部分 Android 浏览器在地址栏收起/展开时会重算 vh，造成布局跳变。
稳妥方案是分场景控制：
- 桌面和大平板：
max-height: 85vh，留出顶部状态栏余量 - 小屏（
max-width: 480px）：max-height: calc(100vh - 120px)，硬扣掉键盘预估高度 - 必须配
min-height: min-content，否则空弹窗或短内容会高度归零
移动端滚动穿透必须靠 overscroll-behavior，不是 overflow
用户在弹窗里往下滑到底，再继续拖——结果背景页跟着动，甚至触发改页。这不是 overflow 没设好，是滚动事件穿透了遮罩层。用 body { overflow: hidden } 临时锁 body 是最常见错误，Safari 会回弹、页面跳顶、iOS 16+ 还可能报手势限制警告。
真正有效的拦截方式只有两个属性配合：
- 遮罩层（
.modal-overlay）加overscroll-behavior: contain，阻断向上传播 - 弹窗主体（
.modal-content）加overscroll-behavior: none，防止拉到顶/底时触发刷新 - 同时给遮罩层加
touch-action: none，禁用双击缩放干扰动画
图片、表单、长文本这些“隐形破窗者”必须单独约束
弹窗容器明明写了 max-width: 90% 和 overflow-y: scroll，内容还是横向溢出？大概率是内部元素没受控。它们不走 flex 或 grid 的弹性逻辑，而是按原始尺寸硬撑。
关键子元素处理清单：
-
img：必须max-width: 100%; height: auto;，否则原始宽高直接破框 -
input、textarea：显式width: 100%，别依赖默认继承值 - 长 URL 或日志文本：
word-break: break-word（比overflow-wrap兼容性更好） -
pre或code块：加overflow-x: auto+white-space: pre-wrap
真正难的不是写对某一条规则，而是所有这些约束必须同时生效——漏掉任意一个，都可能让整个响应式滚动策略失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
