如何实现页面计数器？答案

【问题标题】：How to implement counter of pages?如何实现页面计数器？
【发布时间】：2019-01-03 21:48:17
【问题描述】：

我正在尝试在我的应用中实现页面计数器。想象一下 5 页的 microsoft word 文档。当用户从第 1 页滚动到第 2 页时 - 计数器应显示 1/5 --> 2/5。目前我正在寻找一些建议如何在 React APP 中使用 JS 实现这样的计数器。

我尝试实现 scrollspy： https://materializecss.com/scrollspy.html

在我的应用程序中有一个连续的页面，箭头指针位于每个页面的“末尾”（A4 格式）。每 800px 就有一个箭头指针。我试过实现 scrollspy 逻辑。当用户滚动时，新的箭头指针出现并且计数器应该累积。

【问题讨论】：

您好，欢迎来到 Stackoverflow。请阅读 stackoverflow.com/help/how-to-ask 和 stackoverflow.com/help/mcve。请注意，Stackoverflow 不是编码服务，我们希望您完成研究并尝试解决自己的任务。

标签： javascript scroll pagination counter

【解决方案1】：

这将显示页码，但不显示总页数：

footer {
    position:fixed;
    bottom:0;
    left:0;
}

body {
    counter-reset: page_number;
}

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}

有类似的东西

<p id='page-number'></p>

在页脚中。

浏览器：Firefox 19.0.2

【讨论】：