reel.js 是一个轻量级的 JavaScript 库，用于在网页中创建平滑的滚动效果。它可以与现有的 JavaScript 框架（如 jQuery 和 React）一起使用，同时支持主流浏览器。
安装和使用
要使用 reel.js，您需要安装它作为依赖项：
npm install reel --save
然后，您可以将它导入到您的 JavaScript 代码中：
import Reel from 'reel';
基本用法
要在元素上应用滚动效果，您需要将其包装在一个 <div> 元素中，并将 data-reel 属性设置为选项对象的字符串表示形式。例如：
<div data-reel='{"scroll": "smooth", "speed": 0.5}'>
<!-- your content here -->
</div>在这个例子中，我们使用 data-reel 属性指定了两个选项：
scroll: 滚动行为。可以是"smooth"（平滑滚动）或"snap"（快速滚动，默认值）。speed: 滚动速度。可以是一个数字，表示相对于视口高度的倍数（例如0.5表示半个视口高度每秒）。
要启用 reel.js，只需调用 Reel.run()：
Reel.run();
此时，所有具有 data-reel 属性的元素都将应用滚动效果。
进阶用法
除了基本用法之外，reel.js 还提供了其他选项和方法，以满足更具体的需求。
选项
以下是一些常用的选项：
direction: 滚动方向。可以是"vertical"（默认值）或"horizontal"。distance: 快速滚动时距离每个“刻度线”的像素数。可以是一个数字或一个返回数字的函数。easing: 缓动函数。可以是一个字符串（例如"ease-in-out"）或一个自定义函数。onScrollStart和onScrollEnd: 滚动开始和结束时的回调函数。
方法
以下是一些常用的方法：
Reel.pause()：暂停所有滚动效果。Reel.resume()：恢复所有滚动效果。Reel.scrollTo(element, options)：将页面滚动到指定元素的位置。options参数的格式与data-reel属性相同。
示例代码
下面是一个演示 reel.js 基本用法的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
------- --------------------------------------
-------
-------- -
------- ------
-------- -----
---------------- -------
------------ -------
---------- -----
-
------------------------ -
----------------- --------
-
--------
-------
------
---- --------------------- --------- -------- ------
---- ----------------------- -------
---- ----------------------- -------
---- ----------------------- -------
---- ----------------------- -------
---- ----------------------- -------
------
--------
-----------
---------
-------
-------在这个例子中，我们创建了一个包含五个部分的页面，并使用 data-reel 属性将滚动效果应用于整个页面。每个部分都具有相同的高度，并使用 CSS 样式使它们居中显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36004