交叉观察器（IntersectionObserver）

青AI年

已于 2023-10-18 16:33:33 修改

阅读量109

点赞数

文章标签： css css3 前端

于 2023-10-18 16:26:44 首次发布

本文链接：https://blog.csdn.net/QAIN_/article/details/133908932

版权

交叉观察器(IntersectionObserver)

介绍

    /**交叉观察器
     * var io = new IntersectionObserver(callback, option);
     * IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
     * 构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。
     */

    /**callback 参数
     *var io = new IntersectionObserver(entries => {console.log(entries);});
     * 开始观察
     * io.observe(document.getElementById('example'));
     * 停止观察
     * io.unobserve(element);
     * 关闭观察器
     * io.disconnect();
     *callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。
     */

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #el {
        transition: all 0.5s;
      }
      div {
        width: 1000px;
        background-color: cornsilk;
      }
      .s {
        transition: all 0.5s;
        width: 400px;
        height: 200px;
        background-color: rgb(77, 212, 212);
        margin-bottom: 100px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="el">
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
      <p class="s"></p>
    </div>
  </body>
  <script>
    //  图片懒加载
    const io = new IntersectionObserver(
      (entrys) => {
        entrys.forEach((is) => {
          if (is.isIntersecting) {
            setTimeout(() => {
              is.target.style.backgroundColor = "blue";
              is.target.style.transform = "rotate(360deg)";
            }, 1000);
            io.unobserve(is.target);
          }
        });
      },
      {
        rootMargin: "0px 0px 50px 0px",
      }
    );
    Array.from(document.getElementsByClassName("s")).forEach((item) => {
      io.observe(item);
    });
  </script>
</html>