实现特定滚动机制的技术
在CSS中，现代浏览器支持一些简单的标准滚动效果。在某些情况下，它们的应用可能足以满足项目的特定需求。
▍CSS属性位置：粘性
如果您需要防止某些元素随页面其余部分一起滚动，那么在设置此元素的样式时，只需应用属性即可
position: sticky。这是一个简单易懂的技巧；它的支持已内置在现代浏览器中。但是，要使其在IE和某些移动浏览器中正常工作，您需要一个polyfill。如果您对此主题感兴趣，请阅读此材料。
蓝色元素“停靠”在容器的顶部，并且不会与其余元素一起滚动，
下面是这种滚动的演示。
视差效果
视差效果不是一种特殊技术，而是一种特殊技术。但是，尽管如此，在滚动页面的不同部分时必须以不同的速度移动时，这种效果非常有用。此材料对此技术进行了很好的描述。有许多实施示例。例如，这个。对我而言，此技术的主要缺点是难以理解应该使用哪些值来提供正确的视差效果，以调整透视图和变换。
视差效果：元素以不同的速度移动。
这是视差效果的演示。
anchor使用锚点滚动到特定点
使用带有锚点的滚动，浏览器可以在用户完成常规滚动操作之后，通过将元素移动到特定位置来自动调整元素的位置。在需要完成滚动后，某个元素必须完全位于用户视野内的情况下，这很有用。但是，API仍然不稳定，因此请尝试使用最新的实现，并谨慎使用此方法滚动生产。这是一篇关于该主题的好文章。
如果用户滚动内容以将元素移到容器的上边界之外，则浏览器将自动更改元素的位置，以使其整体可见，
这是使用锚点滚动的演示。
▍平滑滚动
当使用JavaScript中的window.scrollTo（）方法甚至使用scroll-behavior CSS属性将页面滚动到特定部分时，浏览器支持平滑滚动。当前，需要特殊的JavaScript库来实现平滑的滚动以及对鼠标滚轮运动的平滑处理。但是，使用此类库时，需要确保它们与其他滚动技术的正常交互。同样，使用平滑滚动也不总是一个好主意。
通用滚动技术
目前尚没有基于CSS的方式来基于滚动位置触发任何通用滚动动画（尽管有人建议在不久的将来我们可以使用一些通用滚动动画） ... 因此，如果要在元素滚动时对其进行动画处理，则至少需要一些JavaScript代码才能达到所需的效果。有两种方法可以在滚动时使用JavaScript为元素设置动画。第一种是使用Intersection Observer API，第二种是处理事件
scroll。
section使用路口观察者API
IntersectionObserver API 使您能够成功解决与滚动相关的各种任务，如果您只需要启动动画，便要知道某个元素在视口中是否可见，以及该元素的哪一部分可见。这使IntersectionObserver API成为触发动画并伴随屏幕上元素外观的好工具。但是，即使这样，使用此API也很难（尽管可能）实现某些效果。例如，这是根据元素移动方向启动的不同动画。此外，此API在滚动时需要在元素位于视口中间的某个位置（即，它不出现在视口中或从视口中消失）时需要启动动画的情况下不是特别有用。
scroll滚动事件的使用
在使用事件在滚动时实现动画的任何人之前，都会
scroll有很多机会。滚动时，此技术允许在元素相对于查看区域边界的任何位置上作用于元素。使用event scroll，您可以根据项目的需要非常准确地设置动画开始和结束的位置。
鉴于此，应该注意的是，这种滚动动画的方法会给系统带来很大的负担。如果开发人员不关心性能并且不限制事件处理的频率，则会发生这种情况
scroll。另外，决定使用该事件的程序员可以使用scroll，将没有方便的API允许您实现各种滚动方案。这就是为什么经常使用而不是scroll自己实现事件处理机制的原因，而是使用专门的库，因为该库的作者已经处理了事件处理scroll和API 的性能影响，这才有意义。这些库中的某些库甚至能够在元素大小出现问题时为开发人员提供帮助。
通用滚动工具
有几个强大的滚动库，旨在使开发人员完全控制滚动页面时执行的动画，并尽可能延长开发人员的生命，而不必强迫他自己进行复杂的计算。
▍ScrollMagic
ScrollMagic 库为我们提供了一个相对简单的API，使我们可以创建各种滚动效果。该库可以与各种动画库（例如GSAP和Velocity.js）一起使用。没错，最近几年该库没有得到很好的支持。这导致了ScrollScene库的创建。
▍ScrollScene
ScrollScene本质上是一个包装器，旨在提高ScrollMagic库和/或IntersectionObserver API的可用性。它使用自己的ScrollMagic版本，该版本比常规库具有更好的支持。还有其他功能，例如播放视频和支持会影响动画的断点。此外，该库使用GSAP。
▍ScrollTrigger
ScrollTrigger 库是GSAP的官方GreenSock插件。该库具有大量功能，在我看来，它的API是现有滚动库中最简单的API。使用此库，您可以完全控制滚动动画的开始和结束位置，可以在滚动时设置所需的动画（WebGL，canvas，SVG，DOM），还可以在动画运行时固定元素。该库的功能不限于此。GreenSock也支持该库，您可以在GreenSock 论坛上获得使用它的帮助。
worth值得一提的图书馆：机车卷轴
机车滚动 库不努力提供与我们讨论的其他库一样广泛的功能。它的主要目标是实现平滑滚动。此外，使用它，您可以使用attribute来为DOM对象的某些属性设置动画
data-*，或者使用处理程序onscroll来为其他类型的对象设置动画。
技术和工具比较
这是滚动技术的比较。
| API交叉观察器 | 平滑滚动 | CSS中的锚点 | CSS视差效果 | CSS属性位置：粘性 | |
| 固定元素 | -- | -- | -- | -- | + |
| 视差效果 | -- | -- | -- | + | -- |
| 控制动画动态 | ± | -- | -- | ± | -- |
| 使用断点 | ± | -- | + | -- | -- |
| 动态批量处理项目 | + | -- | -- | -- | -- |
| 支持水平滚动效果 | + | + | + | + | + |
| 适合生产（良好的浏览器支持） | ± | ± | ± | + | ± |
| 完全自由的动画 | -- | -- | -- | -- | -- |
| 开发者支持 | 不适用 | 不适用 | 不适用 | 不适用 | 不适用 |
| 使用DOM，Canvas，WebGl，SVG | + | -- | -- | -- | -- |
| 支持调整元素大小 | + | + | + | + | + |
| 将动画限制为仅相关部分 | + | + | + | -- | + |
| 区分滚动方向 | ± | -- | -- | -- | -- |
| 浏览器内置的技术 | + | + | + | + | + |
这是已审核库的比较。
| 滚动触发 | 机车卷轴 | 滚动场景 | ScrollMagic | |
| 固定元素 | + | ± | + | + |
| 视差效果 | + | + | + | + |
| 控制动画动态 | + | ± | ± | ± |
| 使用断点 | + | ± | ± | ± |
| 动态批量处理项目 | + | -- | + | -- |
| 支持水平滚动效果 | + | + | + | + |
| 适合生产（良好的浏览器支持） | + | ± | + | + |
| 完全自由的动画 | + | ± | + | + |
| 开发者支持 | + | + | + | -- |
| 与DOM，Canvas，WebGl，SVG一起使用 | + | ± | + | + |
| 支持调整元素大小 | + | + | + | ± |
| 将动画限制为仅相关部分 | + | -- | ± | ± |
| 区分滚动方向 | + | ± | + | + |
| 浏览器内置的技术 | -- | -- | -- | -- |
结果
要实现某些特殊的滚动机制，例如固定元素和视差效果，标准CSS功能可能就足够了。至少-如果Polyfill用于不支持相应CSS功能的浏览器，则为true。
我通常建议使用ScrollTrigger库来自定义滚动。它使您可以实现纯CSS可以做的所有事情，以及更多。该库负责浏览器对各种技术的支持，有助于执行计算，这使使用它的人可以轻松开展业务。
在项目中设置滚动时使用什么技术？
