Lo que estoy tratando de lograr:

Tengo tres secciones en mi página web, la primera página, la segunda página y la tercera página (esos son nombres de sección, las tres tienen 100vh y 100vw, por lo que cubren toda nuestra pantalla) y quiero que una vez que la segunda página aparezca en la ventana gráfica para que el documento ya no debería ser desplazable (es decir, una vez que nuestra segunda página aparece en la ventana gráfica, ya no podemos desplazarnos a la tercera página, debería dejar de desplazarse)

lo que probé en 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; }

Aplicación.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"))

aquí el problema es solo que cuando me desplazo rápidamente, la segunda página no se detiene, pero si me desplazo lentamente, funciona y quiero que funcione independientemente de qué tan rápido o lento me desplace