Intersection Observer

懒加载以前用定时器(或者滚动事件)对每个需要监听的元素使用 getBoundingClientRect() 获取元素位置。效率不高


var io = new IntersectionObserver(
entries => {
// [...IntersectionObserverEntry对象]
// 与目标对象交叉和分开各执行一次
// 一个包含相交矩形和元素矩形和root矩形属性的对象console.log(entries);},{/* Using default options. Details below */
// 默认选项是刚进入视口
// root = null;
// rootMargin = "0px"; // 来扩展或缩小rootBounds这个矩形的大小
// threshold = [0]; // 触发回调的一系列阈值});// Start observing an element

// 可以使用一个io多次调用observe观察多个元素
io.observe(element); // Stop observing an element// io.unobserve(element);// Disable entire IntersectionObserver // io.disconnect();


不能超出视口:Map intersectionRect to the coordinate space of the viewport of the Document containing the target.

IntersectionObserver 回调函数接收数组,每个对象对应一个跨越的阈值

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