IntersectionObserver深入详解及使用方法

最新推荐文章于 2026-04-11 21:23:18 发布

原创最新推荐文章于 2026-04-11 21:23:18 发布 · 2.4k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript

你不知道的JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了IntersectionObserver接口，用于异步检测元素与根元素或视口的交叉状态，通过设置阈值触发回调函数，展示了如何创建、配置和使用这个功能，以及相关的方法如observe、disconnect等。

一、演示：

IntersectionObserver

IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

构造函数

IntersectionObserver()

创建一个新的 IntersectionObserver 对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。

实例属性

IntersectionObserver.root 只读

测试交叉时，用作边界盒的元素或文档。如果构造函数未传入 root 或其值为null，则默认使用顶级文档的视口。

IntersectionObserver.rootMargin 只读

计算交叉时添加到根边界盒 (en-US)的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求。所有的偏移量均可用像素（px）或百分比（%）来表达，默认值为“0px 0px 0px 0px”。

IntersectionObserver.thresholds (en-US) 只读

一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知（Notification）。如果构造器未传入值，则默认值为 0。

实例方法

IntersectionObserver.disconnect()

使 IntersectionObserver 对象停止监听目标。

IntersectionObserver.observe()

使 IntersectionObserver 开始监听一个目标元素。

IntersectionObserver.takeRecords()

返回所有观察目标的 IntersectionObserverEntry 对象数组。

IntersectionObserver.unobserve()

使 IntersectionObserver 停止监听特定目标元素。

示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
    <style>
      h1 {
        height: 2000px;
        background-color: saddlebrown;
      }
    </style>
  </head>
  <body>
    <h1>123</h1>
    <h2>456</h2>
  </body>
  <script>
    const intersectionObserver = new IntersectionObserver(entries => {
      if (entries[0].intersectionRatio <= 0) return
      console.log('元素显示出来了')
    })
    // 开始监听
    intersectionObserver.observe(document.querySelector('h2'))
  </script>
</html>