Как реализовать счетчик страниц?

Question

Я пытаюсь реализовать счетчик страниц в моем приложении. Представьте себе документ Microsoft Word с 5 страницами. Когда пользователь прокручивает со страницы 1 до страницы 2 - счетчик должен отображать 1/5 -> 2/5. В настоящее время я ищу несколько советов, как реализовать такой счетчик с JS в приложении React.

Я пытался реализовать scrollspy: https://materializecss.com/scrollspy.html

В моем приложении есть непрерывная страница со стрелкой в ​​конце каждой страницы (формат А4). Каждые 800 пикселей есть стрелка указателя. Я пытался реализовать логику прокрутки. При прокрутке пользователя появляется новый 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

Подробнее: Как подсчитать разрывы страниц CSS для печатного HTML?