如果你需要在你的网站上添加滚动效果的话，delay-horizontal-scroller 是一个不错的选择。这个 npm 包让你可以很容易地添加一个滚动效果，而不需要花费太多的精力，只需要几行代码。
安装
在命令行中，使用 npm 包管理器来安装 delay-horizontal-scroller 。
npm install delay-horizontal-scroller
使用
在你的 HTML 文件中，添加一个用于容纳滚动效果的容器：
<div id="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>接下来，在你的 JavaScript 文件中，引入这个包，然后初始化 delayHorizontalScroller 。
import delayHorizontalScroller from 'delay-horizontal-scroller';
delayHorizontalScroller('#container ul', {});最后，你可以通过这个包提供的一些选项来自定义你的滚动效果。
import delayHorizontalScroller from 'delay-horizontal-scroller';
delayHorizontalScroller('#container ul', {
delay: 2000, // 延迟（毫秒）
speed: 50, // 速度
reverse: false // 是否反向滚动
});在这个例子中，滚动效果会在 2 秒后开始，每 50 毫秒滚动一次。你也可以让滚动效果反向滚动。
深入了解
delay-horizontal-scroller 用 requestAnimationFrame 来实现滚动效果，而不是用 setTimeout 或 setInterval 。
滚动效果的实现方法是将你的容器元素向左偏移，然后在它的末尾添加第一个元素。然后用 requestAnimationFrame 来更新偏移量，实现无缝滚动效果。
示例代码
以下是一个完整的示例代码，你可以将其添加到你的 HTML 文件中。
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------- -------- ------------
-------
------
---- ---------------
----
-------- ------
-------- ------
-------- ------
-------- ------
-----
------
------- --------------
------ ----------------------- ---- ----------------------------
----------------------------------- ---- -
------ -----
------ ---
-------- -----
---
---------
-------
-------这个包虽然功能不是很多，但它非常的轻便，能够非常好的满足一些简单的滚动效果需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642581e8991b448e1525