与滚动相关的动画已经在网络上使用了多年。近年来，它们已经开始变得越来越普遍，部分原因是设备性能更高，因此能够处理更多的动画。

这些技术可以分为两大类：一种用于特定的与滚动相关的行为，另一种用于与滚动相关的更一般的行为。

特定的与滚动相关的行为

position: sticky;

CSS视差

不同部分在滚动时以不同的速度移动。

平滑滚动

当https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo在JavaScript中甚至https://css-tricks.com/almanac/properties/s/scroll-behavior/在CSS中使用属性从页面中的一个部分跳转到另一个部分时，本机支持平滑滚动。目前，并非所有浏览器都支持平滑鼠标滚轮操作的通用平滑滚动。有各种各样的JavaScript库试图为鼠标滚轮操作添加平滑的滚动支持，但是我还没有找到一个无错误且可以与所有其他滚动技术完美配合的库。另外，平滑滚动https://css-tricks.com/downsides-of-smooth-scrolling/。

通用滚动行为技术

当前，无法仅使用CSS来基于滚动位置创建或触发通用动画。如果要在滚动上设置元素动画，则至少需要使用一些JavaScript才能创建所需的效果。使用JavaScript可以在滚动上触发动画的方法有两种：使用**intersection**和使用scrollevent。

IntersectionObserver

如果您需要的所有动画信息都是与是否在视口中可见以及元素的可见程度有关的信息，则https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/将非常有用。这使它们成为显示动画的好选择。

即使这样，使用相交观察器仍然有些困难（尽管不是不可能），例如根据元素进入视口的方向触发不同的动画。如果要在元素之间且不与起点和终点重叠的情况下进行任何滚动动画，则交叉口观察者也不太有用。

滚动行为的工具

有一些整体的滚动库试图让您完全控制滚动动画，而不必自己执行所有计算。

ScrollMagic

https://github.com/janpaepke/ScrollMagic提供了一个相对简单的API来在滚动上创建各种效果，并且可以挂接到https://greensock.com/和http://velocityjs.org/类的不同动画库中。但是，在过去的几年中，它的维护变得越来越少，这导致了ScrollScene的创建。

ScrollScene

https://github.com/jonkwheeler/ScrollScene本质上是尝试使ScrollMagic和/或相交观察器更可用的包装器。它使用了自定义，维护程度更高的ScrollMagic版本，并添加了其他功能，例如视频播放，场景初始化断点和场景持续时间断点。它还利用https://greensock.com/。

ScrollTrigger

http://greensock.com/scrolltrigger/是GSAP的官方GreenSock插件。它具有很https://greensock.com/docs/v3/Plugins/ScrollTrigger并且是所有滚动库中最易于使用的API（至少对我而言）。使用它，您可以具有完全的控制权来定义滚动动画的开始和结束位置，对滚动上的所有内容（WebGL，画布，SVG，DOM等）进行动画处理，并在动画运行时将元素固定在适当的位置，等等。另外，它还具有GreenSock和https://greensock.com/forums/的支持。

总结

对于某些特殊的滚动动画效果（如粘性定位和视差），CSS技术可能就足够了

推荐使用GSAP的ScrollTrigger，因为它可以完成CSS属性可以完成的所有工作，并且还有更多其他功能。ScrollTrigger将处理浏览器支持和计算，以便您可以集中精力制作动画！

参考

原文

https://css-tricks.com/an-overview-of-scroll-technologies/