IntersectionObserver API 交叉观察器

• 阮一峰教程
• MDN
• 实战
• 字节前端

定义

1. Intersection Observer API提供了一种异步检测目标元素与祖先元素或 “视口”(viewport) 相交情况变化的方法。

特性

1. 交叉观察器只关心 目标元素 和 根元素 是否有 交叉区域， 而不管视觉上能不能看见这个元素。当然如果设置了 display：none，那么交叉观察器就不会生效了，其实也很好理解，因为元素已经不存在了，那么也就监测不到了。
2. IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。
3. 规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。宏任务??

应用场景

• 图片懒加载-当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
• 在用户看见某个区域时执行任务或播放动画

示例代码

  var io = new IntersectionObserver(callback, option); // callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
  
   // 开始观察
   io.observe(document.getElementById('example'));
   // 停止观察
   io.unobserve(element);
   // 关闭观察器
    io.disconnect();
    
    
    observe的参数是一个 DOM 节点对象。如果要观察多个节点，就要多次调用这个方法。
    
    io.observe(elementA);
    io.observe(elementB);

IntersectionObserverEntry 对象

  {
      time: 3893.92,
      rootBounds: ClientRect {
        bottom: 920,
        height: 1024,
        left: 0,
        right: 1024,
        top: 0,
        width: 920
      },
      boundingClientRect: ClientRect {
         // ...
      },
      intersectionRect: ClientRect {
        // ...
      },
      intersectionRatio: 0.54,
      target: element
 }

• time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
• target：被观察的目标元素，是一个 DOM 节点对象
• rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
• boundingClientRect：目标元素的矩形区域的信息
• intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
• intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

示例

懒加载

  function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
    changes.forEach(function(change) {
      var container = change.target;
      var content = container.querySelector('template').content;
      container.appendChild(content);
      observer.unobserve(container);
    });
  }
);

query('.lazy-loaded').forEach(function (item) {
  observer.observe(item);
});

无限滚动

 var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可见，就返回
    if (entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('Loaded new items');
  });

// 开始观察
intersectionObserver.observe(
  document.querySelector('.scrollerFooter')
);