局部滚动容器弹窗时底层仍可滑动，需对实际滚动父容器（如.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>、<code><tbody> 这些原生标签根本不支持 <code>overflow，所以加 overscroll-behavior 完全被忽略。浏览器连滚动上下文都没创建，属性自然不触发。
正确做法是把表格包进一个显式可滚动的 <div>：
<ul><li>外层 <code><div class="table-scroller"> 必须设 <code>max-height: 400px + overflow-y: auto
overscroll-behavior: contain 要写在这个 <div> 上，不是表格上
<li>如果用了 <code>display: flex 布局，记得给该容器加 min-height: 0，否则子表格可能撑高导致 overflow 失效contain 偶有失效，但比 none 更少卡顿，优先用它
touchmove.preventDefault() 在局部滚动里误杀内部滑动
在弹窗遮罩层上无差别监听 touchmove 并调用 e.preventDefault()，会同时封死弹窗内可滚动区域（比如 .modal-content 里的长列表）。
关键是要做目标判断，只拦截「非可滚动子元素」上的事件：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先给弹窗内允许滚动的区域打标，比如加 class
scrollable-area - 遮罩层的
touchmovehandler 里用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>，改用 <code>display: contents（Safari 15.4+ 支持） - 检查是否有未闭合标签（比如漏了
