IntersectionObserver的使用

最新推荐文章于 2024-05-18 15:32:17 发布

孟宪磊mxl

最新推荐文章于 2024-05-18 15:32:17 发布

阅读量236

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_69210482/article/details/137631838

版权

本文介绍了IntersectionObserver接口，它是HTML5中的一个API，用于异步检测目标元素是否进入或离开其根元素（如祖先元素或视口）的可见区域。通过配置观察者对象，开发者可以监控特定元素的可见性变化并执行相应操作。

摘要由CSDN通过智能技术生成

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

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 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 style="width: 100;height: 100vh; border: 1px solid;">456</h2>
  </body>
  <script>
    const intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            alert(123) 
          }
        });
    }, { threshold: 0 });/* dom顶端进入视图多远时触发 */
    // Start observing
    intersectionObserver.observe(document.querySelector('h2'));
  </script>
</html>

孟宪磊mxl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IntersectionObserver的使用

被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。对象被创建时，其被配置为监听根中一段给定比例的可见区域。）提供了一种异步观察目标元素与其祖先元素或顶级文档。
复制链接

扫一扫