使用Roll.js构建自己的页面滚动效果

您可以在网上找到数十个滚动库 。 大多数代码都是用JavaScript编写的，它们具有自己的效果，您可以为单个页面布局，滚动动画等重新设置样式。

但是如何编写自己的滚动效果呢？ 或者，如果您只是想要一种简单的方法来跟踪用户滚动到页面的下层怎么办？

Roll.js是您要查找的库。 这个开源脚本太小了，超级好用 。 您可以使用几行JavaScript来完成此工作。 最重要的是，它不会强迫您执行任何特定操作，而是为您提供创建自己的自定义滚动功能的工具 。

该库的目的是帮助开发人员轻松构建滚动效果。

如果您查看主要的GitHub存储库 ，则会发现带有一些示例代码段的完整设置指南。 您可以运行函数来调用用户滚动的距离 ，或调用页面上的不同“窗格”。

这些在单页面布局上效果最好，但是您可以使用Roll.js这么多。

通过单个函数调用，您可以在每个滚动中提取数据，其中包括：

• 总页面步数（如果适用）。
• 总计％向下滚动页面。
• 页面上的当前位置（以像素为单位）。
• 总视口高度（基于设备大小）。

这也可以与跳转链接一起使用，这些跳转链接使用户向下（或向上）进入页面的某些部分。

但是您也可以在其他库中找到很多这些功能。 是什么让Roll.js如此特别？

它的一部分是语法，但是最大的卖主是缩小后的总库大小为8KB 。 对于如此详细的滚动库来说，这真是太小了！

您可以在主要的演示页面上看到它的工作原理，甚至可以下载Roll.js源代码亲自研究这些演示 。

实时演示和原始库文件中的所有内容都可以从GitHub中提取，并且它们非常易于使用。

但是，如果您有任何疑问，建议或想分享对真棒库的感谢，可以向创建者@williamngan发送消息。

翻译自: https://www.hongkiat.com/blog/build-page-scrolling-effects-rolls-js/