CODEWITHSUNDEEP
javascriptscrollpaginationcounter
matrixb0ss
matrixb0ss

Reputation: 943

How to implement counter of pages?

I'm trying to implement page counter in my app. Imagine microsoft word document with 5 pages. When user scrolls from page 1 to page 2 - counter should display 1/5 --> 2/5. Currently I'm looking for some advices how to implement such counter with JS in React APP.

I've tried to implement scrollspy: https://materializecss.com/scrollspy.html

In my app there is continuous page, with arrowPointer at the 'end' of each page (A4 format). Every 800px there is arrowPointer. I've tried implement scrollspy logic. When user scrolling, new arrowPointer appears and counter should accumulate.

Upvotes: 0

Views: 1782

Answers (1)

Fran G S
Fran G S

Reputation: 107

This will display page numbers, but not the total number of pages:

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

body {
    counter-reset: page_number;
}

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

Having something like

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

in the footer.

Browser: Firefox 19.0.2

More info: How can I count CSS page breaks for printed HTML?

Upvotes: 1

Related Questions