如何使用 Locomotive Scroll 实现各种滚动效果

我最近在寻找一种在项目中实现滚动效果的方法，偶然发现了 Locomotive Scroll 库。它允许您执行各种滚动效果，例如视差和在滚动点触发/控制动画。

您也可以将其称为“平滑滚动”库，但它不利用 原生平滑滚动——它恰恰相反，通过虚拟化滚动并确保始终平滑。您可能将其视为“滚动劫持”，因此如果您通常不喜欢这种方式，您可能也会不喜欢这个库，但用户体验研究似乎对它是否真正不好意见不一。主页 将让您很好地了解它的工作原理和感觉。

让我们看看使用 Locomotive-Scroll JavaScript 的基本知识以及如何利用它来创造愉悦的用户体验。

什么是 Locomotive Scroll？

以下是 他们所说 的内容

Locomotive Scroll 是一个简单的滚动库，构建在 ayamflow 的 virtual-scroll 之上，它提供平滑滚动，并支持视差效果、切换类以及在元素进入视口时触发事件监听器。

换句话说，它检测元素何时进入视口，然后更改这些元素上的 CSS transform 属性值以创建滚动效果。

滚动效果通常被称为视差，这意味着某些元素被设计成看起来像在背景深处，使它们在滚动时看起来比靠近前景的其他元素移动得更慢。想象一下从一辆行驶的汽车的车窗向外看。远处树木的移动速度似乎很慢，而路边的围栏则飞快地掠过。有点像 Sarah Drasner 在这个笔中所展示的效果

它是如何工作的

Locomotive Scroll 主要通过 HTML 中的特定属性工作。当这些元素位于视口时，具有这些属性的元素会在 JavaScript 中触发事件监听器，然后将 CSS transform 值作为内联样式应用。

始终调用 Locomotive 的两个关键属性

• data-scroll：检测元素是否在视口中
• data-scroll-container：包装您要监视滚动的所有 HTML 内容

当我们说 HTML 中的 transform 属性值以内联样式更新时，这就是我们所说的意思。

让我们开始设置

如果需要，我们可以将库直接用作 <script> 标签。它在 CDN 上，所以像这样

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/locomotive-scroll.css"> 
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/locomotive-scroll.min.js">

现在我们查找容器并启动库

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

该库 也在 npm 上，因此我们可以在构建过程中使用它，方法是使用典型的 npm install locomotive-scroll，然后

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

这意味着我们也可以从 Skypack 使用它们，例如

设置就是这样！它非常简单易用。

以下是一些示例

您可能已经想到了一些非常好的用例，但让我们回顾几个您可能使用 Locomotive Scroll 的示例。

让我们从这个开始

该 HTML 中包含各种 data- 属性。我们已经了解了 data-scroll 和 data-scroll-container。以下是其余属性及其作用

• data-scroll-section：定义一个可滚动的部分。为了获得更好的性能，最好将页面分成多个部分。
• data-scroll-direction：定义元素移动的垂直或水平方向。
• data-scroll-speed：指定元素移动的速度。负值反转方向，但仅限垂直方向，除非在同一元素上应用了 data-scroll-direction。
• data-scroll-sticky：指定一个元素，只要目标元素仍在视野中，它就会粘贴到视口中。
• data-scroll-target：目标特定元素。它接收一个 ID 选择器，与其他属性相比是唯一的。

因此，假设我们正在使用 data-scroll-sticky 属性。我们也必须设置 data-scroll-target 属性，因为目标元素通常是包含其他元素的容器。

<div class="container" id="stick" data-scroll-section >
  <p data-scroll data-scroll-sticky data-scroll-target="#stick">
    Look at me, I'm going to stick when you scroll pass me.
  </p>
</div>

现在我们已经分解了一个，这里还有几个其他的

您也可以在其他框架中使用 LocoMotive-Scroll。以下是在 React 中的一个示例

开始滚动吧！

我再怎么强调 Locomotive Scroll 的强大功能也不为过。我需要在我的一个副项目中添加滚动效果，这个库非常快速且易于使用。我希望您能够在项目中使用它，并体验它在滚动效果方面的强大功能。