Quiero obtener la identificación de cada div a la que me desplazo y mantener la identificación en mi estado.
Tengo una lista de algunos elementos div. Espero almacenar en mi estado la ID actual del div al que me desplazo.
import React, { useEffect, useState } from "react"; export default function App() { const [currentId, setCurrentId] = useState(null); useEffect(() => { // some code here }, []); return ( <> <div style={{ height: 600, background: "#d7a1a1" }} id="div-1"> <h1>div 1</h1> </div> <div style={{ height: 600, background: "#d7a1a1" }} id="div-2"> <h1>div 2</h1> </div> <div style={{ height: 600, background: "#d7a1a1" }} id="div-3"> <h1>div 3</h1> </div> <div style={{ height: 600, background: "#d7a1a1" }} id="div-4"> <h1>div 4</h1> </div> <div style={{ height: 600, background: "#d7a1a1" }} id="div-5"> <h1>div 5</h1> </div> </> ); } Entonces, cuando me desplazo al primer div, quiero almacenar en currentId state div-1 , al segundo div-2 y así sucesivamente.
Puedes hacer algo así:
const [currentId, setCurrentId] = useState(null) const [scrollPos, setScrollPos] = useState(0) useEffect(() => { window.addEventListener('scroll', setScrollPos(window.pageYOffset)) if(scrollPos <= 600) setCurrentId('div-1') else if(scrollPos > 600 && scrollPos <= 1200) setCurrentId('div-2') else if(scrollPos > 1200 && scrollPos <= 1800) setCurrentId('div-3') // and so .... return () => { window.removeEventListener('scroll', handleScroll) } },[])