IntersectionObserver滚动监听IntersectionObserver是一种用于监听目标元素与其祖先元

介绍

IntersectionObserver是一种用于监听目标元素与其祖先元素或根元素交叉状态的API。通俗来讲，就是当一个元素进入或离开视图窗口（viewport）时，可以通过IntersectionObserver API来触发相应的回调函数。

例子

在上面的示例中，我们使用IntersectionObserver来检测每个盒子元素是否在浏览器窗口内可见。如果一个盒子元素进入了浏览器窗口（即它可见），就会给它添加一个动画类。当它不再可见时，就会移除这个类。

ezgif.com-video-to-gif.gif

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>IntersectionObserver Example</title>
    <style>
      .container {
        height: 2000px;
      }
      .occupyBox {
        height: 1000px;
        background-color: #ccc;
      }
      .box {
        height: 200px;
        width: 200px;
        margin-bottom: 20px;
      }

      .fade-in-right {
        -webkit-animation: fade-in-right 0.6s
          cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
      }
      @-webkit-keyframes fade-in-right {
        0% {
          -webkit-transform: translateX(50px);
          transform: translateX(50px);
          opacity: 0;
        }

        100% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes fade-in-right {
        0% {
          -webkit-transform: translateX(50px);
          transform: translateX(50px);
          opacity: 0;
        }

        100% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="occupyBox"></div>
      <div class="box">
        <img
          style="width: 100%; height: 100%"
          src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
        />
      </div>
      <div class="box">
        <img
          style="width: 100%; height: 100%"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        />
      </div>
      <div class="box">
        <img
          style="width: 100%; height: 100%"
          src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
        />
      </div>

      <div class="occupyBox"></div>
    </div>

    <script>
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 加上动画效果类  参考https://animista.net/play/basic/
            entry.target.classList.add('fade-in-right');
          } else {
            entry.target.classList.remove('fade-in-right');
          }
        });
      });
      // 获取所需要监听的box
      const boxes = document.querySelectorAll('.box');
      boxes.forEach((box) => {
        observer.observe(box);
      });
    </script>
  </body>
</html>

总结

这个API的优点在于，它能够异步地、高效地检测目标元素与其他元素的交叉状态变化，从而减少了处理器负荷和内存占用。此外，IntersectionObserver还支持设置多个阈值，以便更精细地控制交叉状态的变化。

在实际的开发中，IntersectionObserver可以用于实现很多功能，比如懒加载图片、滚动到页面底部自动加载内容、实现可视化的数据统计等。