Tengo este código que actualiza un número de 2019 a 2022, pero quiero que solo se ejecute cuando el componente esté a la vista, lo que significa que si no se han desplazado a esa parte de la página, el efecto no debería ejecutarse.
useEffect(() => { setTimeout(() => { setTitle(2020) }, 2000) setTimeout(() => { setTitle(2021) }, 4000) setTimeout(() => { setTitle(2022) }, 6000) }, []);en este momento actualiza el valor incluso cuando no se ha desplazado hacia abajo a esa parte de la página, ¿hay alguna manera de hacer que useEffect solo se active cuando se desplaza a esa sección de la página o necesita hacerlo de manera completamente diferente?
window.addEventListener('scroll', function() { var element = document.querySelector('#main-container'); var position = element.getBoundingClientRect(); // checking whether fully visible if(position.top >= 0 && position.bottom <= window.innerHeight) { console.log('Element is fully visible in screen'); } // checking for partial visibility if(position.top < window.innerHeight && position.bottom >= 0) { console.log('Element is partially visible in screen'); } });Fragmento de https://usefulangle.com/post/113/javascript-detecting-element-visible-durante-scroll . Pegue su código en la parte donde un elemento está completamente a la vista. Recuerde consultar primero el elemento que desea tener a la vista.