简介

IntersectionObserver API 的用法，简单来说就是两行。

var observer = new IntersectionObserver(callback, options);
observer.observe(target);

上面代码中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

IntersectionObserver()的返回值是一个观察器实例。实例的observe()方法可以指定观察哪个 DOM 节点。

// 开始观察
observer.observe(document.getElementById('example'));
// 停止观察
observer.unobserve(element);
// 关闭观察器
observer.disconnect();

上面代码中，observe()的参数是一个 DOM 节点对象。如果要观察多个节点，就要多次调用这个方法。

observer.observe(elementA);
observer.observe(elementB);

注意，IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。