基本用法

构造函数

  1. new IntersectionObserver(callback, options);

callback 发生交叉的回调，接受一个entries参数，返回当前已监听并且发生了交叉的目标集合

  1. new IntersectionObserver(entries => {
  2.   entries.forEach(item => console.log(item));
  3.   // ...
  4. });

item 包含的常用属性

属性 说明
boundingClientRect 空间信息
intersectionRatio 元素可见区域的占比
isIntersecting 字面理解为是否正在交叉，可用做判断元素是否可见
target 目标节点，就跟event.target一样

注意：页面初始化的时候会触发一次callback，entries为所有已监听的目标集合

options 它是一个配置参数，对象类型，非必填，常用属性如下：

属性 类型 说明
root Object 指定父元素，默认为视窗
rootMargin 触发交叉的偏移值，默认为”0px 0px 0px 0px”（上左下右，正数为向外扩散，负数则向内收缩）

如果设置rootMargin为”20px 0px 30px 30px”，那么元素未到达视窗时，就已经切换为可见状态了：

image.png

常用方法

名称 说明 参数
observe 开始监听一个目标元素 节点
unobserve 停止监听一个目标元素 节点
takeRecords 返回所有监听的目标元素集合
disconnect 停止所有监听

简单例子

  1. 假设页面上有一个class="box"的盒子且父元素为视窗
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  11.       width: 200px;
  12.       height: 200px;
  13.       position: relative;
  14.       top: 1000px;
  15.       background: lightgoldenrodyellow
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  21.   <div class="box"></div>
  22.   <script>
  23.     let box = document.querySelector(".box");
  24.     let observer = new IntersectionObserver(entries => {
  25.       entries.forEach(item => {
  26.         let tips = item.isIntersecting ? "进入了父元素的内部" : "离开了父元素的内部";
  27.         console.log(tips);
  28.       });
  29.     });
  30.     observer.observe(box); // 监听一个box
  31.   </script>
  32. </body>
  34. </html>

当这个元素离开进入视窗后就会改变item.isIntersecting属性触发事件。

  1. 指定父元素
  1. let child = document.querySelector(".child");
  3. let observer = new IntersectionObserver(entries => {
  4.   entries.forEach(item => {
  5.     console.log(item.isIntersecting ? "可见" : "不可见");
  6.   });
  7. }, {
  8.   root: document.querySelector(".parent")
  9. });
  11. observer.observe(child); // 开始监听child

传入IntersectionObserver第二个参数root对象可以指定父元素

实际应用

图片懒加载

主要还是滑动到视窗内部触发改变isIntersecting的事件，再把data-set里边的数据填充到src中去。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     .lazyload {
  11.       width: 200px;
  12.       height: 200px;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div style="height: 1000px"></div>
  19.   <div><img class="lazyload" data-origin="./test.png" src="" /></div>
  20.   <div><img class="lazyload" data-origin="./test.png" src="" /></div>
  21.   <div><img class="lazyload" data-origin="./test.png" src="" /></div>
  22.   <script>
  23.     let images = document.querySelectorAll("img.lazyload");
  24.     let observer = new IntersectionObserver(entries => {
  25.       entries.forEach(item => {
  26.         if (item.isIntersecting) {
  27.           setTimeout(() => {
  28.             item.target.src = item.target.dataset.origin; // 开始加载图片
  29.           }, 1000);
  30.           observer.unobserve(item.target); // 停止监听已开始加载的图片
  31.         }
  32.       });
  33.     });
  34.         // 循环遍历每一个元素添加观测
  35.     images.forEach(item => observer.observe(item));
  36.   </script>
  37. </body>
  39. </html>

同样的通过监测视窗位的位置也能实现懒加载
https://blog.csdn.net/weixin_42519137/article/details/98672339

触底

触发触底事件，可进行数据的加载

  1. new IntersectionObserver(entries => {
  2.       let item = entries[0]; // 拿第一个就行，反正只有一个
  3.       if (item.isIntersecting) console.log("滚动到了底部，开始请求数据");
  4.     }).observe(document.querySelector(".reference")); // 监听参照元素

在最底部增加一个元素，观测这个元素出现则继续加载。
完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     .lazyload {
  11.       width: 200px;
  12.       height: 200px;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div style="height: 1000px"></div>
  19.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  20.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  21.     voluptatem. </div>
  22.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  23.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  24.     voluptatem. </div>
  25.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  26.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  27.     voluptatem. </div>
  28.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  29.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  30.     voluptatem. </div>
  31.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  32.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  33.     voluptatem. </div>
  34.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  35.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  36.     voluptatem. </div>
  37.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  38.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  39.     voluptatem. </div>
  40.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  41.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  42.     voluptatem. </div>
  43.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  44.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  45.     voluptatem. </div>
  46.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  47.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  48.     voluptatem. </div>
  49.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  50.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  51.     voluptatem. </div>
  52.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  53.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  54.     voluptatem. </div>
  55.   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aspernatur laudantium illo, porro non quod
  56.     explicabo voluptatibus rem dolorum modi. Maiores qui nulla, deserunt inventore natus ab asperiores corporis
  57.     voluptatem. </div>
  58.   <div class="reference">lllll</div>
  59.   <script>
  60.     new IntersectionObserver(entries => {
  61.       let item = entries[0]; // 拿第一个就行，反正只有一个
  62.       if (item.isIntersecting) console.log("滚动到了底部，开始请求数据");
  63.     }).observe(document.querySelector(".reference")); // 监听参照元素
  64.   </script>
  65. </body>
  67. </html>

吸顶

吸顶可以通过css的粘贴属性position: sticky实现，但是兼容性较差；
如果用交叉观察者实现也很方便，同样也要放一个参照元素；

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     .fixed {
  11.       position: fixed;
  12.       top: 0;
  13.       left: 0;
  14.       width: 100%;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div style="height: 1000px"></div>
  21.   <div class="reference"></div>
  22.   <nav>我可以吸顶</nav>
  23.   <div style="height: 1000px"></div>
  24.   <script>
  25.     let nav = document.querySelector("nav");
  26.     let reference = document.querySelector(".reference");
  27.     new IntersectionObserver(entries => {
  28.       let item = entries[0];
  29.       let top = item.boundingClientRect.top;
  31.       /**
  32.       * 问题很明显，当给nav增加fixed定位时，nav脱离了文档流，
  33.       * 自然参考元素会往下掉，然后往下掉又发生了交叉，从而去除fixed定位，陷入一个死循环;
  34.       */
  35.       reference.style.top = nav.offsetTop + "px";
  36.       /**
  37.       * 当参照元素的的top值小于0，也就是在视窗的顶部的时候，
  38.       * 开始吸顶，否则移除吸顶
  39.       */
  40.       if (top < 0) nav.classList.add("fixed");
  41.       else nav.classList.remove("fixed");
  42.     }).observe(reference);
  43.   </script>
  44. </body>
  46. </html>

注意：这个吸顶在慢慢滑动的时候不太好使

动画展示

某个元素出现的时候就给该元素加个动画，比如渐变、偏移等；

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     ul {
  11.       display: grid;
  12.       grid-template-columns: 50% 50%;
  13.       align-items: center;
  14.       justify-items: center;
  15.     }
  17.     li {
  18.       margin: 20px;
  19.       width: 300px;
  20.       height: 200px;
  21.       background: lightblue;
  22.       list-style: none;
  23.     }
  25.     li.show {
  26.       animation: left 2s ease;
  27.     }
  29.     li:nth-child(2n).show {
  30.       animation: right 2s ease;
  31.     }
  33.     li:nth-child(2n) {
  34.       background: lightcoral;
  35.     }
  37.     @keyframes left {
  38.       from {
  39.         opacity: 0;
  40.         transform: translate(-20px, 20px);
  41.       }
  43.       to {
  44.         opacity: 1;
  45.       }
  46.     }
  49.     @keyframes right {
  50.       from {
  51.         opacity: 0;
  52.         transform: translate(20px, 20px);
  53.       }
  55.       to {
  56.         opacity: 1;
  57.       }
  58.     }
  59.   </style>
  60. </head>
  62. <body>
  63.   <ul>
  64.     <li></li>
  65.     <li></li>
  66.     <li></li>
  67.     <li></li>
  68.     <li></li>
  69.     <li></li>
  70.     <li></li>
  71.     <li></li>
  72.     <li></li>
  73.     <li></li>
  74.     <li></li>
  75.     <li></li>
  76.     <li></li>
  77.     <li></li>
  78.     <li></li>
  79.     <li></li>
  80.     <li></li>
  81.     <li></li>
  82.     <li></li>
  83.     <li></li>
  84.     <li></li>
  85.     <li></li>
  86.     <li></li>
  87.   </ul>
  88.   <script>
  89.     let list = document.querySelectorAll("ul li");
  91.     let observer = new IntersectionObserver(entries => {
  92.       entries.forEach(item => {
  93.         if (item.isIntersecting) {
  94.           item.target.classList.add("show"); // 增加show类名
  95.           observer.unobserve(item.target); // 移除监听
  96.         }
  97.       });
  98.     });
  100.     list.forEach(item => observer.observe(item));
  101.   </script>
  102. </body>
  104. </html>