了解Javascript中的Intersection Observer API
只需几行，您就可以大大改善用户体验。
我遇到了交叉观察者API，同时学习了Gatsby如何预取链接，以提供极快的导航外观。我推迟了几个月的调查，但终于在上周末潜入了。
什么是Intersection Observer API？
简而言之，它使您能够检测元素的可见性，即它是否在当前视口中，以及两个元素相对于彼此的相对可见性。
用例
- 懒惰加载图像
- 无限成交量轴
- 当链接出现在屏幕上时预取链接（盖茨比这样做）
- 检测广告是否被查看（更多跟踪?）
- 确定用户是否已阅读文章，以及在何种程度上阅读（认为媒体视图v / s读取统计数据）
- 仅在屏幕上可见时才运行昂贵的渲染和动画
技术的东西
像往常一样，关于MDN的文档很棒，但我在搞清楚一些事情时遇到了一些麻烦，所以我在这里分享我的笔记。
Intersection Observer API的核心是以下两行。 var observer = new IntersectionObserver（callback，options）;
observer.observe（目标）;
- 消防您创建一个带有一些选项的观察者。
- 然后你要求观察者开始观察目标。
- 当所需的交叉点发生时，将调用您的回调函数。
选项
这是理解的棘手部分。在完成选项中的设置之前，您应该牢牢掌握以下内容：
Intersection Observer API允许您在回调函数中观察根元素和目标元素之间的交集（超过特定阈值）时执行某些操作。
- 将root视为外部矩形或要在其中观察交叉点的矩形。
- target是您正在观看的元素。
- 阈值给出了重叠发生的程度。
- rootMargin是在计算交叉范围之前应用于根的边距。
经验法则
- API是异步的，因此在交集发生时使用回调函数来执行某些操作。
- 可以使用CSS选择器来决定根元素。
- 如果指定root：document.querySelector（'null'），则用户的当前视口将是根元素。
- 使用阈值和rootMargin来获取您期望的确切行为。
这几乎是Intersection Observer API的核心概念。有关进一步阅读，请参阅MDN的文档。
学习输出
在学习这个API时，我想看看我是否可以创建一些有用的东西。所以我写了几行并创建了Chrome扩展程序。该扩展程序使用屏幕上可见的最新部分的ID更新URL。因此，当您与朋友分享更新的URL时，他们可以直接转到您正在阅读的部分。对于在不到一个小时内写的一些行很酷，是吗？
MicroContext
共享指向contentchrome.google.com特定部分的链接
完整代码
此扩展的代码长度少于30行。如果您想通过fork https://github.com/learning-paths-io/microcontext#js-flash-container接受它或者发送拉取请求。
如果您想要发表评论，该扩展程序也会在产品搜索中列出。