IntersectionObserver

它用于观察两个HTML DOM元素之间的交集。当DOM进入或离开可见的视窗（Visible Viewport）时，在DOM中观察一个元素是很有用的。IntersectionObserver的一些用例。

当一个元素在视窗中可见时，延迟加载图像或其他资源
识别广告的可见性并计算广告收入
实现网站的无限滚动。当用户向下滚动页面时，不必要浏览不同的页面
当一个元素在视窗中时，加载和自动播放、视频或动画

基础使用

使用IntersectionObserver API主要需要三个步骤：创建观察者、定义要观察的目标对象、定义回调事件。

创建观察者

const options = {
  root: document.querySelector(".scrollContainer"),
  rootMargin: "0px",
  threshold: [0.3, 0.5, 0.8, 1]
};

const observer = new IntersectionObserver(handler, options);

[0.3]的阈值意味着，当目标元素在根元素指定的元素内可见30%时，调用处理函数。上面意味着当元素被30%、50%、80%和100%可见时，将调用处理程序、回调函数。

定义观察目标

任何目标元素都可以通过调用 .observer(target) 方法来观察。

const target = document.querySelector(“.targetBox”); observer.observe(target);

定义回调事件

这是当一个人注意到某件不寻常的事情发生时的反应。当目标元素与根元素通过阈值相交时，就会触发回调函数。

function handler(entries, observer) {
  entries.forEach(entry => {
    // 每个entry描述一个观察到的目标元素的交集变化
    // entry.boundingClientRect
    // entry.intersectionRatio
    // entry.intersectionRect
    // entry.isIntersecting
    // entry.rootBounds
    // entry.target
    // entry.time
  });
}

window.addEventListener(
  "load",
  function(event) {
    const mainBox = document.querySelector(".mainBox");
    /* Creating observer */
    const options = {
      root: mainBox,
      rootMargin: "0px",
      threshold: [0.3, 0.5, 0.8, 1]
    };
    const observer = new IntersectionObserver(handler, options);

    /* Defining target object */
    const target = document.querySelector(".targetBox");
    observer.observe(target);
  },
  false
);

/* Defining callback handler */
function handler(entries, observer) {
  console.log("Observer handler called: ");
  entries.forEach(entry => {
    const intersectionRatio = entry.intersectionRatio.toFixed(2);
    entry.target.innerText = "Interserction ratio: " + intersectionRatio;
    if (intersectionRatio > 0.8) {
      entry.target.style.background = "green";
    } else if (intersectionRatio > 0.5) {
      entry.target.style.background = "blue";
    } else if (intersectionRatio > 0.2) {
      entry.target.style.background = "red";
    }
  });
}

最近更新于0001-01-01