如何实现页面计数器?

时间:2019-01-03 13:32:17

标签: javascript scroll pagination counter

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

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

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

1 个答案:

答案 0 :(得分: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

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