弹窗局部滚动必须将可滚动内容包裹在显式设max-height和overflow-y:auto的独立子容器中，而非直接作用于.modal；否则iOS穿透、scrollTop为0、滚动条不显示。
弹窗内部局部滚动必须把可滚动内容单独包裹在一个显式创建滚动上下文的容器里，而不是直接给 .modal 或 .modal-content 加 overflow-y: auto —— 否则滚动条不出现、scrollTop 始终为 0、iOS 上还会穿透滚动。
为什么直接给弹窗加 overflow-y: auto 没用
浏览器只对「真实发生滚动」的块级容器应用滚动逻辑。position: fixed 的弹窗外壳（比如 div.modal）默认不创建新的滚动上下文；即使设了 overflow-y: auto，只要它没显式高度限制 + 内容溢出，就不是滚动源，overscroll-behavior 和 scrollTop 都静默失效。
-
.modal { position: fixed; overflow-y: auto; }→ 容器本身没max-height，高度由内容撑开，不构成滚动区域 -
.modal { display: flex; flex-direction: column; }→ 默认不触发滚动，子元素会直接撑高父容器 - 在 iOS Safari 中，若弹窗被
transform或第三方 UI 框架的 wrapper 包裹，overflow更容易被忽略
真正起效的局部滚动容器怎么写
必须把长内容（比如列表、表单、详情文本）放进一个独立的、带尺寸约束的子容器，并在这个子容器上设置全部滚动相关样式。
- 容器要有明确高度限制：
max-height: 70vh或height: 400px（不能只写height: 100%，父级若没高，它就是 0） - 必须设
overflow-y: auto（scroll也行，但auto更安全，避免无内容时强显滚动条） -
overscroll-behavior: contain必须落在这个容器上，不是弹窗外壳，也不是body - 如果容器是
display: flex，记得加min-height: 0，否则子项可能撑高导致overflow失效
iOS Safari 的滚动穿透兜底必须做
即使 CSS 全写对，在 iOS Safari 真机上仍可能滚动穿透——它会因祖先元素的 transform、viewport 缩放或框架自动包裹层跳过 overscroll-behavior。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 弹窗打开时，用 JS 临时禁用
body滚动：document.body.style.overflow = 'hidden' - 同时保存当前
scrollY，关闭弹窗后恢复：window.scrollTo(0, savedScrollY) - 避免只加
is-clipped类却漏掉position: fixed的兼容处理（部分 Android 机型需额外设body { position: fixed; top: -scrollY }） - 不要依赖
touchmove.preventDefault()—— 在 iOS 上对原生滚动无效，还可能引发手势冲突
监听和控制局部滚动位置要绑定到正确元素
别监听 window 或弹窗外壳的 scroll 事件。必须绑定到那个显式设置了 max-height 和 overflow-y: auto 的内部容器上。
- 检查是否真能滚动：
console.log(container.scrollHeight, container.clientHeight, container.scrollTop)—— 如果前两者相等或scrollTop始终为 0，说明没产生可滚动空间 - 回顶部用
container.scrollTo({ top: 0, behavior: 'smooth' })，不是container.scrollTop = 0（后者不支持平滑） - 滚动到底部：确保目标元素在该容器内（
container.contains(target)），再算相对偏移，别用target.offsetTop - container.offsetTop（受transform干扰）
最易被忽略的一点：滚动容器的父级如果有 contain: layout、transform 或 will-change，可能直接截断滚动事件派发或让 getBoundingClientRect() 失准 —— 这类样式得从滚动容器向上逐层排查。
