怎么使用Intersection Observer
时间: 2024-10-13 14:01:37 浏览: 14
Intersection Observer 是一种浏览器 API,用于检测 HTML 元素是否进入或离开视口(即用户当前可视区域)。它非常适合处理滚动、懒加载图片、动态广告管理等场景。以下是使用 Intersection Observer 的基本步骤:
1. **创建观察者**:
首先,你需要创建一个新的 `IntersectionObserver` 实例,并提供一个回调函数 `callback` 来处理目标元素的行为变化。
```javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 当元素进入视口时执行的代码
console.log('Element is intersecting');
} else {
// 当元素离开视口时执行的代码
console.log('Element is not intersecting');
}
});
});
```
2. **开始观察**:
然后,你需要指定要观察的目标元素及其配置,如阈值(intersectionRatio)和等待时间(.rootMargin 或 timeToTrigger)。
```javascript
const targetElements = document.querySelectorAll('.lazy-image');
targetElements.forEach((element) => {
observer.observe(element);
});
```
3. **移除观察**:
当不再需要监视某个元素时,可以调用 `observer.unobserve()` 方法。
```javascript
targetElements[0].removeEventListener('click', () => {
observer.unobserve(targetElements[0]);
});
```
4. **配置选项**:
可选地,你可以设置 `threshold` 属性,是一个数组表示元素完全进入视口前需要满足的最小交叠比例。例如 `[0]` 表示元素顶部必须完全进入,而 `[1]` 则表示底部必须进入。
```javascript
const options = { threshold: [0.5] };
observer.observe(element, options);
```
阅读全文