当前位置：首页 > news >正文

面试之《IntersectionObserver的使用》

news 来源：原创 2025/4/29 3:12:34

IntersectionObserver 是一个 Web API，用于异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的变化。这在很多场景下非常有用，比如懒加载图片、实现无限滚动加载更多内容等。下面详细介绍它的使用方法。

基本原理

IntersectionObserver 允许你注册一个回调函数，当目标元素进入或离开指定的根元素（通常是视口）的可见区域时，这个回调函数就会被调用。

构造函数

IntersectionObserver 的构造函数接受两个参数：

const observer = new IntersectionObserver(callback, options);

callback：当目标元素的可见性发生变化时执行的回调函数。该回调函数接收两个参数：
- entries：一个包含所有被观察元素的 IntersectionObserverEntry 对象的数组，每个对象描述了一个被观察元素的交叉状态变化。
- observer：当前的 IntersectionObserver 实例。
options：一个可选的配置对象，包含以下属性：
- root：指定根元素，即用于检查目标元素可见性的元素。默认为浏览器视口，如果指定了该属性，则必须是目标元素的祖先元素。
- rootMargin：根元素的外边距，用于扩展或缩小根元素的边界框。可以使用类似于 CSS margin 属性的值，例如 '10px 20px 30px 40px'。
- threshold：一个单值或数组，表示目标元素与根元素交叉区域占目标元素总面积的比例。可以是一个介于 0 和 1 之间的数字，或者是一个包含多个这样数字的数组。例如，0 表示目标元素的任何部分进入根元素的可见区域时触发回调，1 表示目标元素完全进入根元素的可见区域时触发回调。

使用步骤

1. HTML 结构

首先，创建一个简单的 HTML 结构，包含一些需要观察的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IntersectionObserver Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script src="script.js"></script>
</body>

</html>

2. JavaScript 代码

在 script.js 文件中，使用 IntersectionObserver 来观察这些元素。

// 获取所有需要观察的元素
const boxes = document.querySelectorAll('.box');

// 定义回调函数
const callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 当元素进入视口时，添加一个类名来改变样式
            entry.target.classList.add('active');
            // 停止观察该元素
            observer.unobserve(entry.target);
        }
    });
};

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver(callback, {
    root: null, // 使用浏览器视口作为根元素
    rootMargin: '0px', // 根元素的外边距
    threshold: 0.5 // 当目标元素的 50% 进入视口时触发回调
});

// 开始观察每个元素
boxes.forEach(box => {
    observer.observe(box);
});

示例解释

首先，使用 document.querySelectorAll 方法获取所有需要观察的 .box 元素。
然后，定义了一个回调函数 callback，当目标元素的可见性发生变化时会执行该函数。在回调函数中，遍历 entries 数组，检查每个元素是否进入视口（entry.isIntersecting），如果进入视口，则添加一个类名 active 来改变元素的样式，并使用 observer.unobserve 方法停止观察该元素。
接着，创建了一个 IntersectionObserver 实例，指定了回调函数和配置选项。
最后，使用 observer.observe 方法开始观察每个元素。

其他用途

懒加载图片：可以在图片进入视口时再加载图片，提高页面性能。

<img class="lazy" data-src="image.jpg" alt="Lazy loaded image">

const lazyImages = document.querySelectorAll('.lazy');
const lazyCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
};
const lazyObserver = new IntersectionObserver(lazyCallback);
lazyImages.forEach(img => {
    lazyObserver.observe(img);
});

无限滚动加载更多内容：当页面滚动到底部时，加载更多的内容。

const loadMoreCallback = (entries, observer) => {
    const entry = entries[0];
    if (entry.isIntersecting) {
        // 加载更多内容的逻辑
        console.log('Load more content');
    }
};
const loadMoreObserver = new IntersectionObserver(loadMoreCallback);
const loadMoreElement = document.querySelector('.load-more');
loadMoreObserver.observe(loadMoreElement);