js Intersection Observer交叉观察器的实际应用

背景

开发功能时，如果想知道一个元素是否可见，传统的方式是监听scroll事件，然后调用元素的getBoundingClientRect()方法，获得元素相对于视窗的位置来判断。这种方式的劣势在于，scroll事件触发非常频繁，常常容易造成页面卡顿。但Intersection Observer API出来以后，可以正式对这种方式说拜拜了。

基本概念

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

上面引用的是MDN上定义的概念，简单来说就是：观察一个元素在其祖先元素内是否可见。详见下图：

如何使用

<div class="footer">footer</div>

const intersectionObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
        // todo
        // ...
    }
});
// 观察元素
intersectionObserver.observe(document.querySelector('.footer'));
复制代码

构造器接受参数说明，官方文档讲的比我好。我就不画蛇添足了，我主要对rootMargin参数做个补充，rootMargin的值是一个字符串, 形式与CSS margin属性相似。正数会向外扩散，负数则向内收缩。详见下图：

效果展示

demo

实际应用

我这里举了三个例子分别是：

1. 无限滚动
2. 图片懒加载
3. 标题和导航联动