JavaScript 中 IntersectionObserver使用「这是我参与11月更文挑战的第27天，活动详情查看

「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」

介绍

IntersectionObserver 是JavaScript中的一个接口从属于 Intersection Observer API ，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
也就是说，IntersectionObserver可以监听元素与文档视窗(viewport)的交叉状态，比如说一个页面中有一个矩形元素，初始时是完全看得到的，这时候它与浏览器可见区域的交叉状态为完全交叉也就是100%，如果经过滚动页面，只能看到这个元素的一半，则交叉状态为50%

用法

需要实例化这个接口，然后通过observe方法观察元素。

// 接收两个参数 callback  option
var io = new IntersectionObserver(callback, options);

// 开始观察(可观察多个元素)
io.observe(document.getElementById('example1'));
io.observe(document.getElementById('example2'));

// 停止观察某个元素
io.unobserve(element);

// 关闭观察器
io.disconnect();

callback为回调函数，当交叉状态改变时会触发，返回一个entries参数，是一个数组，每个成员都是一个IntersectionObserverEntry对象。通过observe观察了几个对象，这个数组就会有几个，初始的时候会加载一次。

IntersectionObserverEntry 对象

{
  time: 3893.92,
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  boundingClientRect: ClientRect {
     // ...
  },
  intersectionRect: ClientRect {
    // ...
  },
  intersectionRatio: 0.54,
  target: element
}

time 只读
- 返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳(DOMHighResTimeStamp).
rootBounds 只读
- 返回一个DOMRectReadOnly用来描述交叉区域观察者(intersection observer)中的根.
boundingClientRect 只读
- 返回包含目标元素的边界信息的DOMRectReadOnly. 边界的计算方式与Element.getBoundingClientRect()相同.
intersectionRect 只读
- 返回一个 DOMRectReadOnly 用来描述根和目标元素的相交区域.
intersectionRatio只读
- 返回intersectionRect 与 boundingClientRect 的比例值.
target只读
- 与根出现相交区域改变的元素.

参数Options

root 监听元素的祖先元素对象，其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
rootMargin 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和CSS 中的margin 属性等同；默认值是"0px 0px 0px 0px"。
threshold 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都在可见范围内时才算可见。阈值的默认值为0.0。

也就是说threshold属性决定了什么时候触发回调函数。

new IntersectionObserver(
  entries => {/* ... */}, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);

[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

例子

<style>
body { height: 3000px; width: 3000px; }
#box1 { width: 300px; height: 300px; background-color: red; margin-top: 100px; margin-left: 300px; }
</style>
<body>
<div id="box1"></div>
<script type="text/javascript">

const io = new IntersectionObserver(entries => {
  console.log(entries)
}, {
  threshold: [0, 0.25, 0.5, 0.75, 1]
})
io.observe(document.getElementById('box1'))

</script>