JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mycont">

    <div id="page1" class="page" style="width: 21cm; height:29.7cm; border: 1px solid; margin: 10px 0">
        <h1 >page1</h1>
    </div>

    <div id="page2" class="page" style="width: 21cm; height:29.7cm; border: 1px solid; margin: 10px 0">
        <h1 class="page">page2</h1>
    </div>

    <div id="page3" class="page" style="width: 21cm; height:29.7cm; border: 1px solid; margin: 10px 0">
        <h1 >page3</h1>
    </div>

</div>

<div style="position: fixed; bottom: 40px; left: 50%; padding: 10px 50px; background-color: #ccc;" id="curpage">cur page 1</div>

JavaScript

var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};
// read the link on how above code works

var findMe = document.querySelectorAll('.page *');

window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(page => {
    //for each .thisisatest
    if (isInViewport(page)) {
      //if in Viewport
      document.querySelector('#curpage').innerHTML="cur "+page.parentElement.id;
    }
});
}, false);