介绍
stroll.js 是一款轻量级的 JavaScript 库，用于实现网页中的滚动效果。它支持水平和垂直方向的滚动，并提供了多种自定义选项。使用 stroll.js 可以使你的网站变得更加动态和吸引人。
安装
在使用 stroll.js 之前，需要先安装它。可以通过 npm 进行安装：
npm install stroll --save
基本用法
引入 stroll.js 后，就可以开始使用它了。以下是一个简单的示例：
-- -------------------- ---- -------
---- ------------------
----
--------- ----- ----- --- ---------
--------------- ---------- ---------
------- -- ------- ------ ---------------
------ ------ -- ------ ----- -----------
------ ---- -- ----- -----------
-------- ------- ------------ ------------
----------- ---- -- ------- -- -- ------- --------------
-------- ---- ----- ----- -- ------------------
------ --------- ----- ---- ------ ------ -- ------ ----- -------------
------------- ---- -------- --------- --- -------------
-------- -- ----- --- ------- -------- ------ ---- -- --- ------------
-----
------
------- -------------------------------------
--------
----------------------- -----
---------在上面的代码中，我们首先创建了一个包含多个列表项的 ul 元素，并将它们放在名为 container 的 div 中。然后，在页面底部引入 stroll.js 并执行 stroll.bind('.container ul') 方法即可让该 ul 元素拥有滚动效果。
高级用法
stroll.js 提供了多种自定义选项，可以实现更加丰富的滚动效果。下面介绍一些常用选项：
滚动速度
可以通过 speed 选项来控制滚动速度：
stroll.bind('.container ul', {
speed: 2000 // 2秒钟滚动完整个列表
});缓动效果
使用 easing 选项可以实现不同的缓动效果：
stroll.bind('.container ul', {
easing: 'elastic' // 弹性缓动效果
});支持的缓动效果有 linear、inQuad、outQuad、inOutQuad、inCubic、outCubic、inOutCubic、inQuart、outQuart、inOutQuart、inQuint、outQuint、inOutQuint、inSine、outSine、inOutSine、inExpo、outExpo、inOutExpo、inCirc、outCirc、inOutCirc、inElastic、outElastic、inOutElastic、inBack、outBack、inOutBack、inBounce、outBounce、和 inOutBounce。
滚动方向
使用 axis 选项可以指定滚动方向：
stroll.bind('.container ul', {
axis: 'y' // 垂直滚动
});默认情况下，stroll.js 同时支持水平和垂直滚动。
总结
通过本文的介绍，你已经学会了如何使用 npm 包 stroll.js 实现网页滚动效果，并了解了一些常用的自定义选项。当你需要为网站添加动态效果时，stroll.js 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33576