在无限滚动列表中，应使用 intersection observer 动态监听尾节点进入视口以触发加载，每次数据插入后需立即用 queryselector（如 .item:last-of-type）重新获取最新尾节点，并在框架异步更新后（如 react 的 useeffect、vue 的 nexttick、原生的 queuemicrotask）执行查询，同时通过 loading 状态和 data 属性防重复加载。

在无限滚动的长列表中，动态捕获“最新的尾节点”不能依赖一次性查询，因为 DOM 是持续变化的。关键在于监听列表变化、定位末位元素，并确保查询时机准确。

用 Intersection Observer 监听尾部元素是否进入视口

这是最稳定、性能最优的方式。不依赖滚动事件节流，也不需要手动计算 scrollTop 和 offsetHeight。

• 初始化时，给列表最后一项（或一个专门的“哨兵节点”）添加 observer 实例
• 当该节点进入视口临界区（例如 rootMargin 设为 "0px 0px 200px 0px"），触发加载下一页
• 新数据插入后，立即重新 observe 新的最后一个真实子元素（或更新哨兵节点位置）

插入新项后，用 querySelector 动态获取最新尾节点

每次 append 或 replace 列表内容后，应主动刷新对尾节点的引用，而不是复用旧的 Element 对象。

• 避免缓存 lastItem = list.lastElementChild 一次后长期使用
• 推荐写法：const latestTail = list.querySelector(':scope > li:last-child')（:scope 确保只查直接子级）
• 若列表项有统一 class（如 .item），可用 list.querySelector('.item:last-of-type') 更健壮

处理异步渲染场景（如 React/Vue）需等待 DOM 就绪

框架更新 DOM 是异步的，直接 querySelector 可能取到旧结构。

• React 中：用 useEffect 或 flushSync 后再查；或配合 requestIdleCallback
• Vue 中：在 nextTick() 回调里执行 querySelector
• 原生 JS：插入节点后调用 queueMicrotask(() => { /* query here */ })

防重复加载与状态同步

尾节点可能被多次 observe 或多次 query，需结合加载状态控制。

• 设置 loading = true 时忽略新的 intersection 回调
• 每次成功加载后，移除旧哨兵、插入新哨兵（或更新 observer.target）
• 可给尾节点加临时 data 属性（如 data-tail="pending"），query 时过滤掉非活跃项