如何实现页面计数器？

Question

我正在尝试在我的应用程序中实现页面计数器。 想象一下5页的Microsoft Word文档。 当用户从第1页滚动到第2页时-计数器应显示1/5-> 2/5。 目前，我正在寻找一些建议，以便在React APP中使用JS实现此类计数器。

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

在我的应用程序中，有一个连续的页面，每个页面的“结尾”处都有arrowPointer（A4格式）。 每800px有一个arrowPointer。 我试过实现滚动逻辑。 当用户滚动时，将出现新的arrowPointer，并且计数器应累积。

Answer 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

更多信息： 如何计算打印HTML的CSS分页符？