IntersectionObserver 如何避免列表滚动监听抖动：rootMargin、阈值与卸载

无限列表在触底加载时，最容易出现的不是“监听不到”，而是同一个哨兵节点在布局变化后连续进入、离开、再进入可视区域，导致请求重复发出。把滚动事件换成 IntersectionObserver 只能解决一部分问题；真正稳定的关键是把预加载距离交给 rootMargin，把触发条件收窄到合适的 threshold，并在请求完成或组件卸载时及时清理观察关系。

列表底部监听建议使用一个独立的 sentinel，用正向 rootMargin 提前触发、用 threshold: 0 判断进入，再用加载状态和 unobserve 防重复；组件销毁时统一调用 disconnect。

先把滚动抖动还原出来

先看一个常见的无限列表：页面底部有一个高度很小的 sentinel，它进入视口就调用 loadMore。如果回调里立刻追加卡片，容器高度改变可能让哨兵再次处于交叉边界；网络响应稍慢时，多个回调还会并行创建请求。

const sentinel = document.querySelector('#sentinel');
let loading = false;

const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting || loading) return;
  loading = true;
  loadMore().finally(() => {
    loading = false;
  });
}, { rootMargin: '0px 0px 240px 0px', threshold: 0 });

observer.observe(sentinel);

这段代码里的 loading 是第一道闸门，但它只能挡住并行请求，不能替代观察关系管理。比如已经没有下一页时继续观察，或者组件切换后旧观察器仍持有节点，都会留下隐蔽的重复回调。

rootMargin 与 threshold 要配合任务来设

rootMargin 会在交叉计算前调整根矩形。正的底部值会把触发区域向下扩展，所以 240px 表示用户还没真正滚到底，就可以开始准备下一页。它适合网络请求或图片加载这类需要提前量的任务。

threshold 表示目标可见比例跨过的阈值。无限列表的哨兵只需要“进入计算区域”即可，通常设为 0；如果是阅读进度或曝光统计，才考虑 0.5、1 等更高比例。不要把两个参数混成“滚动距离配置”，一个改计算矩形，一个改触发比例。

请求成功后再决定是否继续 observe

服务端返回最后一页时，应先把 hasNextPage 设为 false，再执行 unobserve(sentinel)。如果还有下一页，追加 DOM 后再保持观察即可；不需要为了每次加载都新建一个 IntersectionObserver。

把组件实现成可停止的生命周期

观察器最好由一个小函数创建，并返回清理函数。这样列表从“运行中”切到“无更多数据”时可以移除哨兵，从页面离开时也能一次清空所有目标。

function watchList(sentinel, loadMore) {
  let loading = false;
  let hasNextPage = true;

  const observer = new IntersectionObserver(async ([entry]) => {
    if (!entry.isIntersecting || loading || !hasNextPage) return;
    loading = true;
    try {
      const result = await loadMore();
      hasNextPage = result.hasNextPage;
      if (!hasNextPage) observer.unobserve(sentinel);
    } finally {
      loading = false;
    }
  }, { rootMargin: '0px 0px 240px 0px', threshold: 0 });

  observer.observe(sentinel);
  return () => observer.disconnect();
}

这里有两个停止点：业务上没有下一页时调用 unobserve，组件生命周期结束时调用返回的清理函数，也就是 disconnect。前者减少无意义的回调，后者避免旧节点和旧闭包继续留在观察器里。

可访问性与性能检查不能省

自动加载不能成为唯一入口。给列表保留一个可聚焦的“加载更多”按钮，或者在 aria-live 区域公布“已加载第 N 页”，键盘用户才能知道内容发生了变化。按钮与观察器共用同一个 loadMore，但仍要复用 loading 锁。

性能上只观察一个哨兵，不要给每个卡片都注册一个无限列表观察器；回调里不要反复读取大量布局属性，也不要在同一轮中同步插入成百上千个节点。若必须观察多个目标，回调中应按 entry.target 分流，并在目标完成后调用 unobserve。

常见问题：为什么看起来还会触发两次

把 threshold 设成 1 就能消除重复吗？

不能。它只改变目标需要达到的可见比例，不能阻止布局变化带来的多次交叉事件。重复请求仍要由 loading 和页码状态兜底。

rootMargin 写成百分比可以吗？

可以，但它是相对于根矩形对应边计算的。列表预加载通常先用明确的像素值，便于根据网络和卡片高度调试。

unobserve 和 disconnect 该选哪个？

只停止一个已完成目标用 unobserve；整个页面组件不再使用观察器时用 disconnect。两者不是互相替代的同义操作。

收尾：把“触底”变成可验证的状态

稳定的无限列表不是把监听器换成一个新 API 就结束了，而是明确“进入预加载区—请求进行中—追加结果—还有下一页/没有下一页—组件销毁”这条状态链。用 rootMargin 控制提前量，用 threshold 定义触发比例，再用 loading、unobserve 和 disconnect 收口，滚动抖动才不会转化成重复数据和重复请求。