嵌套滚动卡顿主因是passive使用不精准，须按层级独立声明：仅在不阻止默认行为的监听器上启用，外层手势识别、弹窗列表等需设passive:true，轮播拖拽等调用preventDefault处禁用passive，并阻断冒泡。
在嵌套滚动场景（比如弹窗里有可滚动列表、左右滑动卡片中嵌套上下滚动内容）中，卡顿往往不是因为“没加 passive”，而是 passive 加得不精准、不隔离，甚至和业务逻辑冲突。核心原则是：**每个滚动层级独立声明 passive，且只在不阻止默认行为的监听器上启用**。
明确哪些容器需要绑定 passive 监听器
不是所有带 overflow 的元素都要手动监听 scroll/touchmove；只有你主动用 JS 读取滚动位置（如吸顶、懒加载、滚动进度条）时，才需绑定事件——而这类监听器，必须加 passive:true。
- 外层页面（body 或全屏容器）：若监听了 touchmove（例如做手势识别），又不调用 preventDefault()，就加 { passive: true }
- 弹窗内的列表（如 .modal-list）：滚动仅用于内容浏览，无下拉刷新或拖拽，则其 touchmove / scroll 监听器都应设 passive
- 左右滑动轮播区（如 .carousel）：若内部已用 transform + touchmove 实现拖拽，且调用了 e.preventDefault()，则此处不能加 passive，但应限制监听范围（只绑在轮播容器上，不冒泡到父列表）
Vue 场景下正确写法（2.x / 3.x 通用）
避免在模板中混用 .passive 和业务逻辑耦合的 handler。推荐解耦写法：
- 监听滚动位置类操作（如判断是否吸顶）：
@scroll.passive="onScroll"或@touchmove.passive="onTouchMove" - 禁止在同一个元素上既写
.passive又在 handler 里调e.preventDefault()——Vue 会报 warning，且浏览器可能忽略 passive - 嵌套结构中，子组件滚动不应触发父组件的 passive 监听器冒泡；可用
@touchmove.stop.passive阻断冒泡，避免误触发
原生 JS 绑定时的关键细节
用 addEventListener 手动绑定时，passive 不是“开了就稳”，而是要匹配真实行为：
- touchstart 也要设 { passive: true }——哪怕只用来记录起始坐标，不阻止默认行为，它同样会触发浏览器等待机制
- 滚动容器内监听 scroll，优先用
{ passive: true }；但注意：scroll 事件本身不可取消，所以 passive 对它影响较小，重点仍在 touchmove - 移除监听器时，直接
removeEventListener('touchmove', handler)即可，浏览器自动按原注册配置匹配，无需重复传 passive
冲突场景怎么安全降级？
当某一层确实要阻止默认行为（如下拉刷新、手势缩放），又不能破坏其他层级的流畅滚动：
- 只在最小必要区域绑定非 passive 监听器，例如仅给下拉刷新头区域绑
{ passive: false }，其余列表区域保持 passive - 在 handler 中动态判断：
if (e.cancelable) e.preventDefault()，避免对非目标区域误拦截 - 禁用全局 document.touchmove 监听——这是最常导致整个页面失滑的错误写法
