移动端局部滚动需同时满足容器可滚动、内容真溢出、滚动上下文明确三条件；iOS Safari 尤其敏感，须用带 max-height 和 overflow-y: auto 的独立容器，配合 overscroll-behavior: contain 及 JS 禁用 body 滚动兜底。

移动端局部滚动不是加个 overflow-y: auto 就完事——它必须满足「容器可滚动」+「内容真溢出」+「滚动上下文明确」三个条件，缺一不可。iOS Safari 尤其敏感，稍有偏差就静默失效或穿透滚动。

为什么加了 overflow-y: auto 还不滚动？

常见现象：写了 overflow-y: auto，但手指划不动、滚动条不出现、甚至整个页面跟着动。

• 容器没设 max-height 或 height（仅用 100vh 在无父级高度时无效）
• 父级是 display: flex，子容器未加 min-height: 0，导致 flex 项撑高、溢出被忽略
• 内容是纯内联元素（如连续 span），未设 display: block 或 white-space: normal，浏览器不触发溢出计算
• 用了 transform 或 will-change 包裹容器，iOS Safari 15–16 会跳过滚动上下文创建逻辑

移动端局部滚动的最小可靠结构

必须显式构造一个“滚动锚点容器”，不能依赖弹窗外壳或 body。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 用独立 <div> 包裹可滚动内容（比如弹窗里的列表、详情区） <li>该容器设 <code>max-height: 70vh（别只写 100vh，iOS 对视口单位解析不稳定）
• 同时设 overflow-y: auto 和 overscroll-behavior: contain
• 若容器是 display: flex，务必加 min-height: 0
• 避免在该容器上设 position: fixed 或 transform，否则滚动上下文可能被剥离

iOS Safari 的兜底与陷阱

即使 CSS 全对，iOS 真机仍可能穿透滚动——这不是 bug，是 Safari 对祖先层 transform、viewport 缩放、第三方框架包裹层的兼容策略。

立即学习“前端免费学习笔记（深入）”；

• 弹窗打开时，用 JS 临时禁用 body 滚动：document.body.style.overflow = 'hidden'
• 同时保存 scrollY，关闭时恢复：window.scrollTo(0, savedScrollY)
• 别用 touchmove.preventDefault()——iOS 原生滚动不响应它，还可能引发手势冲突
• overscroll-behavior: contain 比 none 更稳妥：保留橡皮筋反馈，避免用户误判为卡死
• 测试时关掉深色模式和缩放，某些系统级干预会让 ::-webkit-scrollbar 样式完全不生效

真正起效的永远是那个带 max-height 和 overflow-y 的具体容器，不是 modal 外壳，也不是 body；而 iOS 的兜底逻辑，从来不是“可选优化”，而是上线前必验的底线。