交叉观察器 API（Intersection Observer API）提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。

交叉观察器

首先，我们需要创建一个交叉观察器

交叉观察器对象接受两个参数，callback 触发回调和 options 观察选项

options 一般要设置 threshold 即观察阈值这个选项

const observer = new IntersectionObserver(callback, options);

创建完观察器后，就可以观察指定对象来判断其可见阈值（相对于父级，默认为 viewport 顶级文档视窗）

const bottomElement = document.body.querySelector(".bottom")

// 观察 HTML 元素
observer.observe(bottomElement)

当交叉观察器发现其指定对象可视度达到设置的阈值范围，就会触发回调

回调函数会传入一个 entries 列表，这个列表存入的是符合观察条件的一系列对象

触底检测

一般来说

实现滚动触底刷新, 网上大部分给出的方法是利用 EventListener 去监听父级标签的 scroll 事件。

通过计算（可视高度 + 滚动距离 >= 实际高度）来检测是否触底。每滚动一下，就会触发检测函数，会损耗部分性能

实际上，我们可以使用交叉观察器来解决，交叉观察期是专门用于解决类似这样检测滚动触底加载的需求

使用简单，逻辑直观

实现

用交叉观察期实现触底检测

实现思路是在滚动区域的最下方放一个空元素，用于判断触底，当底部空元素出现时，则确认触底

// 回调函数
const onScrollBottom = entries => {
  const entry = entries[0];

  if (entry.intersectionRatio > 0) {
    console.log('触底');
  }
};

// 创建交叉观察器
// 观察触发阈值设置为 1, 意味着当元素100%的部分显示时，触发回调
const observer = new IntersectionObserver(onScrollBottom, { threshold: 1 });

// 最底部参考元素
const bottomReference = document.body.querySelector('#bottom');

// 开始观察
observer.observe(bottomReference);