Tengo una lista de secciones dentro de un contenedor ( root ), cada una observada por el mismo Intersection Observer.

Al hacer clic en un ancla en la navegación izquierda (roja), se desplaza a esa sección y la devolución de llamada del observador de la intersección actualiza el estado con la ID de la sección correspondiente. En resumen, estoy tratando de diseñar dinámicamente el ancla mientras me desplazo y navego, grabo la ID y la comparo con el atributo href .

Funciona como se esperaba siempre que solo una sección respete el umbral, pero a veces me enfrento a esta situación:

Al desplazarse hacia arriba (por ejemplo, de 4 clics a 2), funciona como se esperaba, el último ID de estado corresponde al atributo href en el que acabo de hacer clic.

Pero cuando me desplazo hacia abajo (por ejemplo, de 1 clic a 2), dado que 2, 3 y 4 están visibles, la última ID de sección establecida en el estado corresponde a la sección #4.

¿Hay alguna forma de apuntar siempre a la entrada más cercana a la raíz?

 export const Main = () => { const sectionRefs = useRef([]); const observerRef = useRef(null); const [intersectionId, setIntersectionId] = useIntersection(); useEffect(() => { const intersectionCallback = (entries) => { entries.some((entry) => { if (entry.isIntersecting) { setIntersectionId(entry.target.id); return true; } }); }; observerRef.current = new IntersectionObserver(intersectionCallback, { root: document.getElementById('root'), threshold: 0.75, rootMargin: '0px 0px 0px 0px', }); examplesRefs.current.forEach((sectionElement) => { observerRef.current.observe(sectionElement); }); return () => { observerRef.current.disconnect(); }; }, [setIntersectionId]); return ( <Container id="root"> {examples.map(({ id }, index) => ( <Section key={id} id={id} ref={(child) => (sectionRefs.current[index] = child)} /> ))} </Container> ); };