What I am trying to achieve:

I Have three sections on my webpage first page, second page, and third page (those are section names, all three have 100vh and 100vw so they are cover our entire screen) and I want that once the second page comes in the viewport so the document should not be scrollable any more (i mean once our second page comes in viewport we can't scroll anymore to the third page it should stop scrolling)

what I tried in codepen. https://codepen.io/Adarsh04/pen/yLvppBK

rootElement

<div id="root"></div>

CSS

  body{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  /* width: 4px;
  cursor: pointer; */
  display: none;
}

.firstPage,.secondPage,.thirdPage{
  border:1px solid red;
  width:95vw;
  margin:atuo;
  height:95vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
}

.firstPage{
  background-color:red;
}

.secondPage{
  background-color:blue;
}

.thirdPage{
  background-color:yellow;
}

App.js

    const App = () => {
  React.useEffect(()=>{
    const handleEvent = () => {
      const bounding = document
        .getElementById("secondPage")
        .getBoundingClientRect();
      if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <=
          (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <=
          (window.innerHeight || document.documentElement.clientHeight)
      ) {
        console.log("Element is in the viewport!");
        document.body.style.overflow = "hidden";
      } else {
        console.log("Element is NOT in the viewport!");
      }
    };
    window.addEventListener("scroll", handleEvent, { passive: true });

    return () => {
      window.removeEventListener("scroll", handleEvent), { passive: true };
    };
  },[])
  return(
    <div className="box">
      <div className="firstPage">First.</div>
        
    <div id="secondPage" className="secondPage">Second.</div>
      
      <div className="thirdPage">Third</div>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

here the problem is only that when I scroll fastly that the second page is not stopped but if I scroll slowly its works and I want it should work regardless of how fast or slow I scroll