这些不同库之间的一个重要区别在于它们的工作方式。Locomotive Scroll 的工作原理是在主体周围创建一个固定容器，并通过改变其位置来移动容器内的主体。然后，它会检查每个具有“data-scroll”属性的组件，并相应地更改滚动行为。

借助这些属性，您可以更改滚动速度、时间、方向、延迟等内容。因此，它很容易定制，但也有一些事情需要注意。原生滚动被禁用，这意味着当您滚动浏览网站时，您实际上并没有滚动。您的滚动操作会被跟踪，滚动容器内的主体会通过 css 变换移动。这可能会弄乱某些 css 样式，例如粘性元素，并且并不总是能与需要元素位置的其他动画库（如 GSAP ScrollTrigger）很好地配合。

关于 locomotive scroll 还需要注意的是，它是一个开源项目，核心包大小为12.33KB。但是，如果你想在 React 等框架内使用它，你可能需要一些额外的包，在本例中是“react-locomotive-scroll”。这会增加总大小。

优点和缺点：

❌ 原生滚动条

❌ CSS 粘性

✅ 开源

✅ 内置动画系统

如果您可以使用内置动画选项，那么这个库是一个很好的选择，但如果您正在寻找具有更强大动画选项的库，那么下一个库可能是一个更好的选择。

Locomotive-scroll 的一个主要问题是它不能与其他动画库很好地配合使用。GSAP ScrollSmoother 解决了这个问题。GreenSock (GSAP) 是一个用于在网站上创建动画的大型库。他们的 ScrollSmoother 只是他们提供的一小部分。其他库包括补间、时间轴和各种缓动函数等功能。

这是 GSAP ScrollSmoother 的一个主要优势，因为它可以与整个 GSAP 动画系列完美配合。在滚动效果方面，它也具有很大的可定制性，工作方式与 locomotive-scroll: data-attributes 类似。使用这些属性，您可以控制单独的滚动速度和滚动延迟，从而控制速度和延迟。

正如您所见，ScrollSmoother 本身的动画选项比 locomotive-scroll 少很多，但这是设计使然。所有其他动画都可以轻松地与其他 GSAP 库一起添加。这创造了一个非常通用的工具，而且妥协更少。它还使用原生滚动，这意味着您不会创建假滚动条，您实际上是在滚动页面，而不仅仅是转换页面。

对于这个库以及所有 GreenSock 库，需要记住的一件事是，它不是开源的，如果您想将其用于商业用途，则需要 GreenSock 许可证。

ScrollSmoother 修复了许多问题，但也有一些问题没有解决。最明显的是 CSS 粘性位置，因此开箱即用时很难在元素上创建粘性位置。幸运的是，可以使用 GSAP 提供的其他功能（如 scrollTrigger 插件）解决这个问题。ScrollSmoother 的另一个缺点是，如果您只需要基本的平滑效果，它的大小相对较大，为26.08KB 。

优点和缺点：

✅ 原生滚动条

✅ 内置动画系统

❌ CSS 粘性

❌ 开源

因此，如果您想要一个可以处理大多数动画的全面系统，GSAP 就是您的最佳选择。但是，如果您的网站不需要大量的动画选项，而您正在寻找的只是一个简单、轻量级的库，以实现更流畅的滚动体验，Lenis Scroll 可能是更好的选择。

Lenis 与 locomotive-scroll 类似，也是开源的，由一家机构创建。在本例中，该机构是 Studio Freight。如果您阅读了最后两篇滚动库文章，您可能会想“我们为什么需要另一个滚动库？”。答案很简单。早期的库有很多优点，但如果您想要一个简单、轻量级的库，而又不想为 CSS 技术（如变换属性或粘性定位）创建变通方法，那么选择它们就是错误的。这就是 Lenis 正在填补的空白。

Lenis 非常小（2.13kb），并且专注于滚动，而且只专注于滚动。由于专注于滚动，它具有一些以前的库所没有的默认选项，例如创建自定义滚动缓和并将页面变成无限滚动（当您到达页面底部时将您送回顶部）。

所有这些使得 Lenis 成为一个非常用户友好的库，但它的主要卖点是它不会干扰任何东西。这样一来，如果您以后在项目中决定添加一些 GSAP 动画或其他动画库，您就知道页面滚动不会成为问题。

正如您在示例中看到的，Lenis 的自定义选项少了很多。但有时少即是多。当您查看 html 时，您会注意到没有添加任何数据属性或任何内容，我们添加的唯一内容是添加目标 div 的 id。

网站使用了“Lenis” 。

✅ 原生滚动条

✅ CSS 粘性

✅ 开源

❌内置动画系统

总之，在网站上创建自定义滚动动画有很多不同的选择，我们讨论的每个库 - Locomotive-scroll、GSAP SmoothScroller 和 Lenis Scroll - 都有自己独特的优势和功能。

Locomotive-scroll 是一个功能强大且灵活的库，提供广泛的自定义选项，使开发人员能够轻松创建复杂且引人入胜的滚动动画。GSAP SmoothScroller 是一个灵活的库，经过优化，可在 GSAP 动画环境中完美运行，使其成为即使在低端设备上也能创建复杂动画的理想选择。另一方面，Lenis Scroll 是一个简单而轻量的库，它提供了一种用户友好的方式来创建自定义滚动动画，而不会牺牲性能或功能。

最终，这些库之间的选择将取决于您的项目的具体需求。如果您正在寻找灵活且可定制的解决方案，Locomotive-scroll 可能是最佳选择。如果动画是您的首要任务，GSAP SmoothScroller 是您的最佳选择。如果您正在寻找简单且用户友好的解决方案，Lenis Scroll 是完美的选择。

无论你选择哪个库，重要的是选择最能满足你的需求并帮助你创建你为网站设想的自定义滚动动画的库。因此，无论你是经验丰富的 Web 开发人员还是刚刚起步，都可以尝试其中一个库，看看自定义滚动动画的魔力如何变成现实！

在我们实际的网站开发中，GSAP ScrollSmoother受制于商用版权的问题很少采用，在定制网站开发中用得比较多的就是Locomotive scroll，经常搭配ScrollTrigger使用。如果网站本身没有多少交互，采用Lenis会是比较好的一个选择。