>[danger]介绍一下Js中的IntersectionObserver `IntersectionObserver` 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。它提供了一种有效的方法来检测元素是否可见或进入视口。 >[info]用法 使用 `IntersectionObserver` 需要以下步骤： 1. 创建一个 `IntersectionObserver` 实例，传入一个回调函数和可选的配置对象。 ``` const observer = new IntersectionObserver(callback, options); const callback = (entries, observer) => { // 处理交叉状态变化的回调函数 }; const options = { // 可选配置 }; ``` 2. 将要观察的目标元素添加到观察者中。 ~~~ const target = document.querySelector('#targetElement'); observer.observe(target); ~~~ 3. 在回调函数中处理交叉状态的变化。 ~~~ const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // 元素进入视口 } else { // 元素离开视口 } }); }; ~~~ `entries` 参数是一个包含每个目标元素交叉状态信息的数组。每个 `entry` 对象都有以下属性： * `target`：观察的目标元素。 * `intersectionRatio`：目标元素与视口的交叉比例，值在 0 到 1 之间。 * `isIntersecting`：目标元素是否与视口相交。 * `intersectionRect`：目标元素与视口的交叉区域的位置和尺寸信息。 `options` 对象是可选的配置，其中常用的配置选项包括： * `root`：指定观察器的根元素，默认为视口。 * `rootMargin`：设置根元素的外边距，用于扩大或缩小交叉区域。 * `threshold`：指定交叉比例的阈值，可以是单个数值或由多个数值组成的数组。 >[info]应用场景 `IntersectionObserver` 适用于实现懒加载、无限滚动、广告展示和可视化统计等场景，同样可以判断元素是否在某一个容器内，不会引起回流。