javascript - 如何实现页面计数器？

Question

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

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

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

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>

在页脚中。

浏览器:火狐19.0.2

更多信息:How can I count CSS page breaks for printed HTML?