通过一个API判断元素是否在可视区内

相信大家都遇到过这样的需求，某元素要出现在可视区域再开始执行什么。我看到网上大多数是用js去判断元素距顶部的距离等等，虽然可以实现但我觉得太麻烦了。今天我就给大家介绍一个api实现它。

什么是Intersection Observer？

Intersection Observer是一个浏览器API，用于监视页面上的元素与视口之间的交叉状态。换句话说，它可以告诉我们元素何时进入或离开视口，以及它们在视口中的可见程度。这一信息对于实现懒加载、无限滚动、元素动画和广告跟踪等功能非常有用。

Intersection Observer的工作原理

Intersection Observer的工作原理非常简单。它创建一个观察器实例，然后将其绑定到要监视的目标元素上。当目标元素进入或退出视口时，观察器会触发回调函数，允许您执行特定的操作。

以下是Intersection Observer的基本工作流程：

1. 创建一个Intersection Observer实例。

2. 指定要观察的目标元素。

3. 配置观察器选项，如阈值、根元素和其他参数。

4. 定义一个回调函数，以响应目标元素进入或退出视口。

5. 将回调函数绑定到观察器实例。

6. 观察器开始监视目标元素。

7. 当目标元素进入或退出视口时，观察器触发回调函数。

如何使用Intersection Observer？

使用Intersection Observer非常简单，以下是一个基本示例：

// 创建观察器实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 目标元素进入视口
      entry.target.classList.add('visible');
    } else {
      // 目标元素离开视口
      entry.target.classList.remove('visible');
    }
  });
});

// 指定要观察的目标元素
const targetElement = document.querySelector('.target');

// 开始观察目标元素
observer.observe(targetElement);

在上述示例中，我们创建了一个Intersection Observer实例，用于监视名为.target的目标元素。当.target元素进入视口时，我们为其添加了一个visible类，当它离开视口时，我们将该类移除。

其实他还有很多细节用法，我就不过多介绍了，感兴趣的可以自己去搜索这个api。