如何在JavaScript中使用PrognRoll和jQuery在网站中显示滚动进度条

本文概述

下载并包含PrognRoll
使用PrognRoll

【如何在JavaScript中使用PrognRoll和jQuery在网站中显示滚动进度条】你是否曾经去过一个网站, 那里的滚动似乎是无穷无尽的, 而且你读了又读, 而文档并不仅仅是停下来？最近, 许多网站(主要是发表长文章的页面)已经开始实现一种指示符, 该指示符显示在位于文档顶部的进度栏中, 当用户向下滚动时, 该指示符就会更新。进度取决于你向下滚动文章的距离(非常简单而酷炫的文章), 你认为吗？这可以帮助用户知道他离完成出版物还有多远。许多设计人员说, 顶部的进度条很有用, 并且与网页设计结合在一起, 但是开发人员认为此功能无用, 因为已经有一个滚动条, 其进度与滚动条几乎相同。顶端。你站在哪一边？
如果你正在寻找使用jQuery插件在网站中实现这种功能的方法, 那么你来对地方了。在本文中, 我们将解释如何使用jQuery插件PrognRoll在窗口中创建此进度栏。
下载并包含PrognRollPrognRoll是一个纤巧, 轻巧的jQuery插件, 可在页面上创建滚动进度条。它的使用和自定义非常容易, 并且仅压缩了966字节, 这使其更加出色。
要使用PrognRoll, 请下载源代码文件或在资源库中缩小版本。然后使用脚本标签添加对脚本的引用：

< script src="http://www.srcmini.com/jquery.js"> < /script> < script src="http://www.srcmini.com/src/prognroll.js"> < /script>

如你所见, PrognRoll仅需要一个脚本文件, 可以使用JavaScript直接进行自定义(进度条的宽度和背景颜色)。
如果你愿意测试该库, 则可以简单地使用CDN：

< !-- jQuery as dependency --> < script src="http://img.readke.com/220522/19262M529-2.jpg"> < /script> < !-- Include PrognRoll --> < script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"> < /script>

有关更多信息, 请在此处访问Github中项目的官方资源库。
使用PrognRollPrognRoll的用法非常简单, 它将处理进度条的创建, 因此你无需添加额外的标记。可以通过2种不同的方式初始化插件, 以遵循整个文档或可以在文档中滚动的自定义元素：
文档中的进度栏
要在整个文档中创建滚动进度条, 只需使用jQuery选择文档的body元素, 然后在其上初始化插件即可：

$("body").prognroll({//Progress bar heightheight: 5, //Progress bar background colorcolor: "#03a9f4", // If you make it true, you can add your custom div and see it's scroll progress on the page custom: false});

自定义元素中的进度栏
如果不是衡量整个文档的进度, 而是可以通过使用jQuery选择元素, 然后在其上应用插件来显示自定义元素的进度。请记住将custom属性设置为true：

$(".custom-element").prognroll({//Progress bar heightheight: 5, //Progress bar background colorcolor: "#03a9f4", // Using custom element instead of the bodycustom: true});

编码愉快！