así que he estado tratando de simplemente obtener mi detector de eventos para que un componente funcione y se actualice en el desplazamiento. Encontré esta publicación: obtenga la posición de desplazamiento con Reactjs y probé la segunda respuesta (porque estoy trabajando principalmente con ganchos y quiero que mi código sea consistente). Así que tengo este código dentro de mi componente:
const [scrollPosition, setScrollPosition] = useState(0); const handleScroll = () => { const position = window.scrollY; console.log(position); setScrollPosition(position); }; useEffect(() => { window.addEventListener('scroll', handleScroll, { passive: true }); return () => { window.removeEventListener('scroll', handleScroll); }; }, [scrollPosition]);El código no registra nada en la consola y cada vez que trato de usar la posición de desplazamiento, el valor siempre es 0. ¿Estoy haciendo algo mal? ¡Cualquier ayuda sería muy apreciada!
Entonces finalmente entiendo por qué el código no funcionaba. La página que quería desplazar estaba envuelta dentro de un div. El div ocupaba toda la página y tiene múltiples secciones. Pensé que el div simplemente estaba expandiendo la página y que la ventana todavía se estaba desplazando. Resulta que en realidad me estaba desplazando dentro del div y no de la ventana. Así que lo siguiente es lo que terminó funcionando:
const scrollEvent = (e) => { console.log(e.target.scrollTop) } ... <div onScroll={scrollEvent}> ... </div>No estoy seguro de si esto es lo más óptimo o algo así, pero al menos me da la posición de desplazamiento que quería. ¡Gracias a todos los que respondieron!
Está dando la dependencia al useEffect. El useEffect solo se ejecutará una vez que se cambie scrollPosition .
Y nunca cambiará en su código, ya que useEffect no se ejecuta. Es mutuamente dependiente.
Intente eliminar scrollPosition en la dependencia useEffect.