如何通过设置 IntersectionObserver 的 root 属性，在特定滚动容器中实现无限滚动加载？

本文共计1058个文字，预计阅读时间需要5分钟。

IntersectionObserver 默认以视口为根容器，如果目标元素位于某个 内部且该 带有 overflow-y: auto 的样式（例如，带有滚动条），但未显式设置 root，那么它将永远只检测元素是否进入浏览器视口，而不是进入那个局部容器。结果是，当滚动子容器时，callback 基本上不会触发。

必须把目标滚动容器作为 root 传入，且该容器需满足两个条件：

• 有明确的高度和 overflow（如 overflow-y: scroll 或 auto）
• 在 DOM 中已挂载、可被 JS 访问到（不能是后续动态插入却未重连 observer 的情况）

常见错误写法：new IntersectionObserver(callback) —— 缺少 root；正确写法示例：

const container = document.querySelector('#infinite-list');<br>const observer = new IntersectionObserver(callback, { root: container });

rootMargin 要配合容器内边距和加载占位符调整

无限加载通常在“底部即将可见”时触发，不能等元素真进视口才加载，否则用户会看到空白或跳动。这时候靠 rootMargin 提前触发很关键——但它不是像素值直接填进去就行。

实际要算的是：从容器底部向上多少距离开始触发加载。