使用 IntersectionObserver 实现滚动触发效果

IntersectionObserver 接口可以高效地监视一个或多个元素是否进入或离开浏览器视口（或指定的祖先元素）。滚动监听器会在每个像素位置触发，而观察器只会在元素越过阈值时调用回调，因此对于基于滚动的效果，性能要好得多。

回调会接收一个由 IntersectionObserverEntry 对象组成的数组，每个被观察的元素对应一个对象。每个条目都有一个 isIntersecting 布尔值（可见时为 true）和一个介于 0 到 1 之间的 intersectionRatio 数值（表示元素当前可见的比例）。使用这些值可以确定可见性状态。

在 useEffect 中创建观察器，并调用 observer.observe(ref.current) 开始监视元素。必须将该引用附加到您要跟踪的 DOM 元素上。请在组件挂载后创建观察器，以确保 ref.current 已填充。

在 useEffect 清理函数中，调用 observer.unobserve(element) 停止观察特定元素，或调用 observer.disconnect() 停止所有观察。忘记清理会导致观察器在组件卸载后继续存在，从而可能造成错误或内存泄漏。

threshold 选项控制回调的触发时机。值为 0 时，只要元素有一个像素可见就会触发。值为 1 时，只有元素完全可见才会触发。您也可以传入类似 [0, 0.5, 1] 的数组，以便在多个可见性级别触发回调。

rootMargin 使用类似 CSS 的语法扩展或缩小有效交叉区域：'100px 0px' 会在元素进入视口前 100px 处触发。使用 '-100px' 时，只有当元素进入视口 100px 以内才会触发。这对于在元素完全可见之前预加载内容或开始动画很有用。

要实现图片的延迟加载，请先设置 data-src 属性，而不是设置 src。观察器触发并带有 isIntersecting: true 时，将 data-src 复制到 src，以触发网络请求。然后调用 observer.unobserve(entry.target)，因为该图片只需加载一次。

对于淡入动画，请在 isIntersecting 变为真时添加 CSS 类：element.classList.add('visible')。请在 CSS 中定义过渡效果：.card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } 和 .card.visible { opacity: 1; transform: none; }。观察器会高效地触发该动画。

IntersectionObserver 非常适合跟踪查看情况。当带有 data-analytics-id 属性的元素以 0.5 的阈值进入相交状态时，请触发分析事件。这样可以准确衡量用户实际阅读了哪些内容区段，比简单的滚动深度百分比可靠得多。

通过为每个元素调用 observer.observe(element)，单个 IntersectionObserver 实例就可以观察多个元素。所有被观察的元素共享同一个回调函数和选项。请在回调函数中使用 entry.target 来确定是哪个元素触发了通知。

可复用的 useInView 钩子会返回 [ref, inView]。将 ref 附加到任意元素，并读取 inView 来了解该元素当前是否可见。该钩子接受一个用于设置阈值和 rootMargin 的 options 对象。这种抽象让任意组件中的滚动效果都可以采用声明式写法。

IntersectionObserver 的阈值为 0 表示什么？

IntersectionObserver 使用 isIntersecting 和 intersectionRatio 高效地跟踪元素可见性。请始终使用 unobserve 或 disconnect 进行清理。使用 threshold 控制触发点，并使用 rootMargin 扩展检测区域。您可以将它应用于延迟加载、动画和分析跟踪。