局部滚动容器弹窗时底层仍可滑动，需对实际滚动父容器（如.list-container）动态设overflow:hidden，而非仅body；表格需外包可滚动div并设overscroll-behavior:contain；touchmove需精准拦截非scrollable-area区域；DOM过深会致事件延迟引发穿透。

局部滚动容器里弹窗打开后底层仍可滑动

直接给 body 加 overflow: hidden 对局部滚动无效——因为滚动发生在子容器（比如 .list-container），不是 body 本身。浏览器只管当前滚动上下文，锁错层级等于没锁。

必须定位到真正滚动的父容器，再做隔离：

• 用 DevTools 的 Elements 面板选中滚动区域，看它的 overflow-y 是否为 auto 或 scroll
• 确认该容器是否设置了 max-height 或固定高度（否则 overflow 不生效）
• 弹窗打开时，对该容器动态加 overflow: hidden；关闭时还原
• 若该容器是 Vue/React 的根节点（如 #app 或 .main-view），也要同步处理，不能只盯 body

表格内部滚动穿透：为什么 overscroll-behavior 没反应

<table>、<tbody> 这些原生标签根本不支持 overflow，所以加 overscroll-behavior 完全被忽略。浏览器连滚动上下文都没创建，属性自然不触发。

正确做法是把表格包进一个显式可滚动的 <div>：

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 外层 <div class="table-scroller"> 必须设 max-height: 400px + overflow-y: auto
• overscroll-behavior: contain 要写在这个 <div> 上，不是表格上
• 如果用了 display: flex 布局，记得给该容器加 min-height: 0，否则子表格可能撑高导致 overflow 失效
• iOS Safari 15–16 中 contain 偶有失效，但比 none 更少卡顿，优先用它

touchmove.preventDefault() 在局部滚动里误杀内部滑动

在弹窗遮罩层上无差别监听 touchmove 并调用 e.preventDefault()，会同时封死弹窗内可滚动区域（比如 .modal-content 里的长列表）。

关键是要做目标判断，只拦截「非可滚动子元素」上的事件：

• 先给弹窗内允许滚动的区域打标，比如加 class scrollable-area
• 遮罩层的 touchmove handler 里用 e.target.closest(".scrollable-area") 判断
• 匹配到就跳过 preventDefault()；否则才阻止
• addEventListener 必须显式传 { passive: false }，漏写等于白写

嵌套过深导致 touchmove 延迟，滚动穿透“时有时无”

DOM 层级超过 6 层（比如 body > #app > .page > .content > .list > .item）时，低端安卓机上 touchmove 从触发到执行 handler 可能延迟 40ms+，用户快速滑动时事件还没处理完，底层就已开始滚动。

排查和优化点：

• 在 DevTools Elements 面板右键任意节点 → Show DOM properties，查 depth 值
• 删掉无语义的包裹 <div>，改用 display: contents（Safari 15.4+ 支持）
• 检查是否有未闭合标签（比如漏了 </div>），浏览器自动纠错会导致整块结构深度暴增
• <table> 内部尤其敏感，<td> 里塞 <div> 会破坏表格渲染树

滚动穿透不是单点 CSS 问题，而是滚动上下文、事件传播、DOM 结构三者耦合的结果。最容易被忽略的是：你以为锁住了 body，其实滚动发生在某个 div 里；你以为加了 overscroll-behavior，结果它根本没挂载到可滚动容器上。