我正在参加「掘金·启航计划」

Intersection Observer

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或viewport相交情况变化的方法。可以轻松实现一下需求。

• 图片懒加载——当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 在用户看见某个区域时执行任务或播放动画

Intersection Observer的概念和用法

Intersection Observer API允许你配置一个回调函数，当一下情况发生时会被调用。

• 每当目标 (target) 元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根 (root)。
• Observer 第一次监听目标元素的时候。 两种情况触发，一是我们设置的阈值达到时会触发，另外一个是初始化时会触发回调函数。 您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根 (root) 元素的交集，请指定根 (root) 元素为null。 目标 (target) 元素与根 (root) 元素之间的交叉度是交叉比 (intersection ratio)。这是目标 (target) 元素相对于根 (root) 的交集百分比的表示，它的取值在 0.0 和 1.0 之间。

创建一个Intersection Observer

let options = {
  root: document.querySelector('#scrollArea'),// 选取一个滑动元素。
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

options

1. root：指定根 (root) 元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗。
2. rootMargin：根 (root) 元素的外边距。类似于 CSS 中的 margin 属性，如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为 0。
3. threshold：可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。

let target = document.querySelector('#listItem');
observer.observe(target); // 设置target。即要对root中的那个元素进行observer。

// 可以复制出来去谷歌里看看。