JS：IntersectionObserver（监听目标元素是否出现在窗口中）

最新推荐文章于 2024-05-30 11:27:58 发布

一天只码五十行

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量377

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45820271/article/details/137521021

版权

一、简介

IntersectionObserver 是 JavaScript 中的一个 API，用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素的可见性发生变化时，你可以使用 IntersectionObserver 来执行某些操作，比如懒加载图片、无限滚动等。 new IntersectionObserver() 是用于创建一个新的 IntersectionObserver 实例的构造函数。当你调用这个构造函数时，你需要传递一个回调函数作为参数，这个回调函数会在交叉状态变化时被调用。

简单的说，这个API能够帮你检测一个元素是否出现在视窗中，从而实现需要的交互效果。

二、基础应用

在下面的代码中，被监测的div每次出现在可视窗口中时都会打印一次"div 现在在视窗中！"

当然，下面的代码会出现滚动条，但是如果不可见，依然算作与视窗无交叉。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IntersectionObserver 监听 div 是否在视窗中</title>
    <style>
      #monitored-div {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        position: absolute;
        left: 100px;
        top: calc(100vh - 200px);
        animation: move 5s infinite;
      }
      @keyframes move {
        0% {
          top: calc(100vh - 200px);
        }
        50% {
          top: 120vh;
        }
        100% {
          top: calc(100vh - 200px);
        }
      }
    </style>
  </head>
  <body>
    <div id="monitored-div">我是被监听的 div</div>

    <script>
      // 获取被监听的 div
      const monitoredDiv = document.getElementById("monitored-div");

      // 创建一个 IntersectionObserver 实例
      const observer = new IntersectionObserver(
        (entries, observer) => {
          entries.forEach((entry) => {
            // 检查 entry.isIntersecting 是否为 true
            if (entry.isIntersecting) {
              console.log("div 现在在视窗中！");
            } else {
              console.log("div 不在视窗中。");
            }
          });
        },
        { threshold: 0.1 }
      ); // 这里的 threshold 表示目标元素与视窗的交叉比例达到 10% 时就触发回调函数

      // 开始观察 monitoredDiv
      observer.observe(monitoredDiv);
    </script>
  </body>
</html>