IntersectionObserver 交叉观察者 -- 观察目标元素与可视区域的交叉区域

介绍
IntersectionObserver 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。

IntersectionObserver接收两个参数，分别是callback和options。options可选，有默认值。
const observer = new IntersectionObserver(callback[, options]);

基本使用

<div class="viewableArea">
  指定的可视区域
​
  <div class="target">被监听的目标元素div>
​
  内容很多，都多到出现滚动条了。内容很多，都多到出现滚动条了。内容很多，都多到......
div>

  const specifiedViewableArea = document.getElementsByClassName('viewableArea')[0];
  const target = document.getElementsByClassName('target')[0];
​
  const options = {
   
    // 指定可视区域
    root: specifiedViewableArea,
    // 给可视区域添加”虚拟“外边距
    rootMargin: '0px',
    // 当目标元素与指定可视区发生交叉，且目标元素出现在可视区的部分占目标元素的比例是0.33时，触发callback的调用。
    threshold: 0.33,
  };
​
  const callback = (entries: IntersectionObserverEntry[], observer?: IntersectionObserver) => {
   
    entries.forEach((entry) => {
   
      console.log('entry:', entry)