Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Intersection observer API提供了一种方法，可以异步观察目标元素与祖先元素或顶层文件的交集变化。

一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事，毕竟大部分解决办法并非完全可靠，也极易拖慢整个网站的性能。然而，随着网页发展，对上述检测的需求也随之增加了。多种情况下都需要用到元素交集变化的信息，比如：

• 当页面滚动时，懒加载图片或其他内容。

• 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。

• 为计算广告收益，检测其广告元素的曝光情况。

• 根据用户是否已滚动到相应区域来灵活开始执行任务或动画。

过去，交集检测通常需要涉及到事件监听，以及对每个目标元素执行Element.getBoundingClientRect() 方法以获取所需信息。可是这些代码都在主线程上运行，所以任何一点都可能造成性能问题。当网页遍布这些代码时就显得比较丑陋了。

Intersection Observer API 会注册一个回调方法，每当期望被监视的元素进入或者退出另外一个元素的时候(或者浏览器的视口)该回调方法将会被执行，或者两个元素的交集部分大小发生变化的时候回调方法也会被执行。通过这种方式，网站将不需要为了监听两个元素的交集变化而在主线程里面做任何操作，并且浏览器可以帮助我们优化和管理两个元素的交集变化。

Intersection Observer API 不能告诉你的一件事情是 (两个元素的)重叠部分的准确像素个数或者重叠的像素属于哪一个元素。然而这个API覆盖最广的最常用的使用方式是"如果两个元素发生的交集部分在N%左右，我需要做处理一些事情(执行回调)"

目前的支持情况

https://caniuse.com/#search=IntersectionObserver

Source

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API