Intersection Observer API 是滚动动画的唯一方法吗?

Is Intersection Observer API the only way to animate on scroll?

我在很多这样的网站上遇到过,这些网站的动画通过滚动来触发。实际上我一开始以为我们在 javascript 中通过计算光标相对于网站页面的位置我们可以通过每个位置的动画来做到这一点。

但是当我进行一些谷歌搜索时,我发现了有关 Intersection Observer 的内容。我设想的方法是否存在任何性能问题或类似问题?

注意:我正在寻找一种无需框架的方法。

在 Intersection Observer API 之前,您将监听 scroll 事件并检查每个滚动像素的元素位置。那是性能繁重的工作,并且经常被调用! Intersection Observers 旨在以高效的方式解决这个问题。您不会从替代方案中获得更好的性能。

您不需要框架。 API 是您浏览器的本机(考虑到您有支持)。

如果您正在寻找现成的动画,那么 AOS 库就是一个很好的例子。还有许多其他库可用于滚动动画。