intersectionobserver 使用
时间: 2023-11-24 19:08:35 浏览: 39
IntersectionObserver 是一个新的 API,使开发者能够异步观察目标元素与祖先元素或顶级文档之间的交叉状态。它提供了一种有效的方式来监视元素何时进入或离开另一个元素的视窗中。
使用 IntersectionObserver API,您可以:
1. 观察 DOM 元素的交叉状态,而不必使用轮询或事件监听器。
2. 可以观察到任何 DOM 元素的交叉状态(包括不可见元素)。
3. 可以观察到文档中多个元素的交叉状态。
4. 可以选择要观察的交叉区域的形状。
5. 可以设置观察器的选项,例如 root、thresholds 和 delay。
以下是使用 IntersectionObserver 的基本步骤:
1. 创建一个 IntersectionObserver 实例,传入一个回调函数。
2. 使用 observe() 方法观察要观察的元素。
3. 在回调函数中处理交叉状态的变化(进入、离开或部分进入)。
例如,以下代码使用 IntersectionObserver 来观察一个元素何时进入视窗中:
```
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('Element is fully visible in viewport');
} else {
console.log('Element is not fully visible in viewport');
}
});
});
// 观察要观察的元素
const target = document.querySelector('.target');
observer.observe(target);
```
在这个例子中,我们创建了一个 IntersectionObserver 实例,并使用 observe() 方法观察了一个名为 "target" 的元素。当该元素进入视窗中时,回调函数将被调用,并且 isIntersecting 属性将为 true。