了解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接受它或者发送拉取请求。
如果您想要发表评论,该扩展程序也会在产品搜索中列出。