局部滚动容器中touchmove被吞掉，根本原因是浏览器优先将touchmove用于原生滚动，尤其iOS Safari不冒泡；需同时满足：移除touch-action: pan-y、监听时用{passive: false}、在touchmove中按dx/dy动态preventDefault。
局部滚动容器里 touchmove 被吞掉怎么办
常见现象是：给一个 .list-container 设置了 overflow-y: auto，里面放卡片或列表项，但自定义的滑动手势（比如左滑删除、右滑标记）完全不触发——touchmove 事件压根收不到，或者只在容器边缘生效。
根本原因不是监听没加，而是浏览器默认把可滚动区域的 touchmove 优先拿去处理滚动了，尤其在 iOS Safari 上，touchmove 甚至不冒泡，子元素监听器直接失联。
- 检查该容器是否意外设置了
touch-action: pan-y（很多 UI 框架默认加），它会禁止横向 touch 事件，导致 swipe 手势失效 - 确保监听时用了
{ passive: false }：element.addEventListener('touchmove', handler, { passive: false })，否则preventDefault()会被静默忽略 - 不要在
touchstart就调用preventDefault()，先记录起始点，在touchmove中根据位移差动态判断：if (Math.abs(dx) > 10 && Math.abs(dx) > Math.abs(dy))再拦截，保留竖向滚动能力
轮播图 + 局部滚动列表共存时手势打架
典型场景：Swiper 轮播图在顶部，下面是个 max-height: calc(100vh - 200px) 的列表容器，用户想横向滑轮播图，却误触列表导致页面卡顿或跳转。
关键不是“谁抢到事件”，而是“谁该响应什么方向”。浏览器无法自动区分意图，必须靠 CSS 显式声明：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 轮播图容器加
touch-action: pan-x，明确只响应横向滑动，纵向上放行，不影响列表滚动 - 列表容器加
touch-action: pan-y，禁用横向拖拽干扰，同时允许用户竖向滑动浏览内容 - 如果轮播图内部还有点击区域（如按钮），需额外加
touch-action: manipulation到按钮上，避免长按触发系统菜单
下拉刷新和局部滚动容器冲突怎么破
当页面主体是局部滚动（比如 #feed 容器设了 max-height 和 overflow-y: auto），而你又想在它顶部实现下拉刷新，就会发现：手指刚往下拉一点，容器自己就滚动了，刷新动画出不来。
核心矛盾在于「刷新判定条件」和「滚动触发时机」重叠。解决方案要分层控制：
- 刷新逻辑必须绑定在局部容器本身（比如
#feed），而不是document或body，否则事件捕获路径太长，容易被中间层截断 - 在
touchstart阶段记录scrollTop，touchmove中只在element.scrollTop 0时才调用preventDefault()，其他情况全部放行 - 给该容器加
overscroll-behavior: contain，防止 iOS 弹性滚动穿透影响scrollTop判断（Safari 下scrollTop可能为负，但overscroll-behavior能把它锁死在 0）
为什么加了 passive: false 还是不生效
现象是：明明写了 { passive: false }，preventDefault() 却没阻止滚动，或者控制台报 Unable to preventDefault inside passive event listener。
问题往往出在监听对象或事件阶段错位：
- 监听的是父容器，但实际滚动的是子容器（比如父
div监听了touchmove，但overflow在子.content上）——事件没冒泡上来，或捕获阶段没抓到 - 监听了
document，但目标元素设置了touch-action: none，浏览器直接跳过事件分发，根本不会触发你的监听器 - 多个
addEventListener嵌套调用，后注册的监听器覆盖了前一个的passive设置（Chrome 会以最后一次为准） - 框架（如 React/Vue）可能封装了事件委托，你加的原生监听器被绕过了，得改用框架提供的 ref 或生命周期钩子绑定
最稳的做法：直接在滚动容器 DOM 元素上绑定，用 ref 或 querySelector 精准获取，别依赖事件冒泡或 document 全局监听。
