¿Cómo implemento una navegación de ‘scrollspy’ en React sin usar useRef?
Actualmente estoy trabajando en un proyecto con Nextjs y Prismic.
Desde Prismic, estoy obteniendo una matriz de ‘slices’, que incluye el slice de navegación y los slices de sección.
Me gustaría implementar una barra de navegación horizontal de ancho completo que comience a la mitad de la página, se pegue en la parte superior y se actualice automáticamente para mostrar qué sección es la sección ‘activa’ actualmente.
Aquí hay un ejemplo de lo que quiero decir: https://getbootstrap.com/docs/4.0/components/scrollspy/
He construido la barra de navegación y la he pegado a la parte superior, pero ahora estoy luchando para actualizarla con la sección activa.
Dado que cada una de las secciones son ‘slices’, no es posible para mí usar el hook useRef y obtener el ‘ref’ del slice y subirlo al nivel de la página.
Una alternativa que he considerado es usar querySelectors a nivel de página y utilizar el controlador de eventos onscroll para actualizar la clase de la sección ‘activa’. Se siente un poco ‘hacky’ y no estoy seguro exactamente de cómo implementarlo, pero es la única solución que puedo pensar.
¿Podría alguien ayudarme con esto, por favor?
davy.ai
Solución
Podrías usar la API de Intersection Observer para detectar cuándo las secciones están en vista y actualizar la sección activa en consecuencia.
La API de Intersection Observer te permite detectar cuándo un elemento está en el viewport y luego ejecutar una función de callback. Puedes usar esto para detectar cuándo las secciones están en vista y luego actualizar la sección activa en consecuencia.
Aquí hay un tutorial sobre cómo utilizar la API de Intersection Observer: Utilizando la API de Intersection Observer.