介绍
在Web开发中，滚动条的动态效果常常能够带来优秀的用户体验。但是，纯CSS实现的滚动动画总是有着繁琐的代码和不够平滑的动画体验。因此，我们选择使用tinynova-zenscroll这款npm包，带来流畅的滚动动画。
安装
在终端输入以下命令安装npm包：
npm install tinynova-zenscroll
使用
在使用tinynova-zenscroll前，需要在html中引入tinynova-zenscroll.min.js：
<script src="node_modules/tinynova-zenscroll/tinynova-zenscroll.min.js"></script>
取得元素并滚动
取得需要滚动到的元素，并在滚动完成之后，执行回调函数。
const element = document.getElementById('my-element-id');
zenscroll.to(element, 500 /*滚动时间，单位是毫秒*/, () => {
console.log('滚动完成');
});滚动到页面底部
zenscroll.toBottom(500);
常用选项
在默认情况下，tinynova-zenscroll提供了多种可设置选项，例如动画的紧贴位置等等。以下列出一些常用选项：
紧贴位置
这个选项决定了滚动后页面的停靠位置中，元素的位置是接近viewport的顶部还是底部。在默认情况下，设置是中间。
// 最接近viewport的底部
zenscroll.to(element, 500, { edgeOffset: 60 /*像素值，注意单位*/ });全局选项
可以使用setOption函数修改选项的全局默认值，这样就可以避免重复地为每个调用都设置相同的选项。
zenscroll.setOption('defaultDuration', 1000);示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------------
----- ----------------
------- -------------------------------------------------------------------------
------ ----------------
---- -
---------- -----
------------ ----
------- --
----------- --------
------ -----
------------ -------------- ------------------- ------ ---- ------- ------------ ------- ---------- ---------- ------ -----------
----------- ---------------- ---- -----
-
--- --- --- --- --- -- -
------- - - ---- --
-
-- -
---------- -----
------------ ----
-
---------- -
------ ----
------- - -----
------------ -----
-
---- -
------ ------
------- ------
----------------- --------
------- ---- -----
-------- -----
---------------- -------
------------ -------
-
----------------- -
-------- -----
---------------- -------
----------- ------
-
------ -
---------- -----
------- - -----
----------------- --------
------ -----
-------- ---- -----
------- -----
-------------- ----
------- --------
-------------------- -----
-
------------ -
----------------- --------
-
--------
-------
------
---- ------------------
-----------------------------------
---
------------------------------------- ------------------------------
----
---- -------------------------
------- ----------------------------------------------
------- -----------------------------------------------
------- ----------------------------------------------
------
---- --------- -----------------------
---- --------- -----------------------
---- --------- -----------------------
------
------- -----------------------
-------- ------------------ -
----- -------- - --------------------------------
---------------------- ------
-
-------- ------------------- -
----- --------- - --------------------------------
----------------------- ------
-
-------- ------------------ -
----- -------- - --------------------------------
---------------------- ------
-
---------
-------
-------结论
使用tinynova-zenscroll，我们可以轻松地实现平滑并且优秀的滚动动画，这对于我们优化页面效果带来了很大的帮助。因此，如果您想要优化网站的滚动效果，不妨来试试tinynova-zenscroll这款npm包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ec81e8991b448d79be