Planteamiento y contexto
La página tiene enlaces a secciones del artículo o a elementos de un carrusel y debe resaltar el objetivo actual mientras se desplaza. scroll-target-group de CSS puede declarar un contenedor de navegación existente como un grupo de marcadores de desplazamiento, conectando los fragmentos de destino con el contenido visible. Explica su límite frente a IntersectionObserver, los anclajes tradicionales y scroll-marker-group, y luego diseña una mejora progresiva.
Qué evalúan los entrevistadores
Los entrevistadores buscan enlaces reales que funcionen antes de que se agregue el estado visual. Una respuesta sólida distingue la posición de desplazamiento, la posición de foco y el estilo del elemento actual; gestiona destinos duplicados, contenido dinámico, desplazamiento horizontal y movimiento reducido; y explica la alternativa cuando una propiedad experimental no está disponible. Una sola declaración de CSS no demuestra un sistema de navegación operable.
Preguntas para aclarar antes de responder
¿Cuáles son los destinos de navegación?
Confirma si cada enlace apunta a un ID de sección estable, a una tarjeta de carrusel o a un elemento de lista virtual. Los destinos deben ser direccionables por el navegador y conservar su significado cuando la lista se reordena.
¿Cómo se define “actual”?
Aclara si significa entrar en el viewport, cruzar un umbral, recibir el foco o ser el último elemento en el que se hizo clic. El estado de desplazamiento y el de foco pueden diferir, por lo que una sola regla de color no puede representar ambos.
Compatibilidad y alternativas
Enumera los navegadores de destino, los lectores de pantalla y los requisitos de teclado. scroll-target-group es experimental; los anclajes tradicionales y cualquier lógica de observación requerida aún deben funcionar de forma independiente.
Estructura de respuesta en 30 segundos
“Primero uso navegación semántica y anclajes estables para los saltos básicos, luego declaro el contenedor de navegación como un scroll-target-group para que un objetivo pueda recibir el estilo actual cuando entra en el viewport. Los marcadores de desplazamiento no gestionan el foco, así que pruebo el orden de tabulación, el foco después de un salto y la ruta de retorno por separado. Una vez que el contenido dinámico crea destinos, vuelvo a verificar las relaciones. En navegadores no compatibles mantengo los enlaces normales y agrego solo la mejora necesaria con IntersectionObserver; luego pruebo de extremo a extremo la configuración de teclado, lector de pantalla, desplazamiento horizontal y movimiento reducido.”
Respuesta detallada paso a paso
Paso 1: Crear anclajes estables
Genera un ID único y predecible para cada sección o elemento y utiliza fragmentos de destino reales en los enlaces de navegación. No dependas únicamente de los índices de arreglos, ya que el filtrado, la paginación y el renderizado en el servidor pueden cambiarlos.
Paso 2: Declarar el grupo de marcadores de desplazamiento
En los navegadores compatibles, establece scroll-target-group: auto en el contenedor de la tabla de contenido o de los controles del carrusel. Esto permite que los enlaces de fragmentos participen en la relación del marcador de desplazamiento, pero no diseña el foco ni la semántica por ti.
Paso 3: Separar el estilo del elemento actual y del foco
Usa el estado de objetivo actual o su equivalente para expresar la posición de desplazamiento, y :focus-visible para expresar el foco del teclado. Cuando ambos estén presentes, preserva el contraste, las etiquetas comprensibles y las transiciones moderadas.
Paso 4: Manejar contenedores dinámicos y múltiples
Después de que se carguen secciones, un carrusel entre en bucle o los contenedores de desplazamiento anidados cambien, vuelve a verificar la unicidad de los destinos y la estabilidad del elemento actual. No permitas que un solo enlace sea interpretado por múltiples contenedores de desplazamiento; divide los grupos cuando sea necesario.
Paso 5: Diseñar la alternativa y la verificación
Cuando la propiedad no sea compatible, los anclajes normales aún deben saltar. Agrega IntersectionObserver solo como una mejora para la indicación del elemento actual. Prueba teclado, lector de pantalla, retroceso del navegador, zoom, desplazamiento horizontal y prefers-reduced-motion.
Respuesta de muestra de alta calidad
Primero generaría IDs estables para las secciones del artículo y usaría enlaces reales en la tabla de contenido para que los saltos funcionen sin CSS. Si el navegador de destino lo admite, establecería scroll-target-group: auto en el contenedor de navegación y resaltaría el objetivo actual manteniendo visible el foco del teclado con :focus-visible. Los marcadores de desplazamiento no mueven el foco dentro del contenido, por lo que verificaría el comportamiento del foco y la ruta de retorno después de la activación intencional de un enlace. Para cargas infinitas o un carrusel, verificaría la unicidad de los IDs y la estabilidad del elemento actual cada vez que se agregue un destino. Los navegadores no compatibles conservarían los anclajes con una mejora basada en observadores para el estado; terminaría con pruebas de tareas en configuraciones de escritorio, móviles, lectores de pantalla y movimiento reducido.
Errores comunes
- Error: Proporcionar estado de CSS sin enlaces de anclaje reales. → Por qué falla: Los navegadores no compatibles y las tecnologías asistivas pierden la navegación. → Solución: Construye enlaces semánticos que funcionen de forma independiente.
- Error: Tratar el elemento visible como el foco del teclado. → Por qué falla: Un usuario puede enfocar la navegación sin desplazar el contenido, por lo que los estados entran en conflicto. → Solución: Diseña el estado actual y
:focus-visiblepor separado. - Error: Generar IDs de destino a partir de índices de arreglos. → Por qué falla: Las cargas con filtrado y bucles crean duplicados o desajustes. → Solución: Usa identificadores comerciales estables y verifica la unicidad después de las actualizaciones.
- Error: Enviar la propiedad experimental como un requisito indispensable. → Por qué falla: El soporte del navegador y el comportamiento de desplazamiento anidado varían. → Solución: Mantén los anclajes, mejora según la capacidad y supervisa la finalización de tareas.
Preguntas de seguimiento y respuestas
Pregunta de seguimiento 1: ¿Por qué no usar simplemente IntersectionObserver?
Observer es útil para la compatibilidad con navegadores existentes o umbrales de negocio complejos; scroll-target-group puede reducir este código de estado. Se pueden superponer: preserva primero los enlaces y el foco, y luego compara el costo de mantenimiento.
Pregunta de seguimiento 2: ¿Pueden un carrusel horizontal y una tabla de contenido vertical compartir un solo grupo?
Por lo general, no. Sus ejes de desplazamiento, la visibilidad de los destinos y los modelos de teclado difieren, por lo que el significado del elemento actual se vuelve ambiguo. Divide los grupos por contenedor de desplazamiento y etiquétalos de forma independiente.
Pregunta de seguimiento 3: ¿Debería moverse el foco automáticamente cuando cambia la sección actual?
No muevas el foco durante el desplazamiento pasivo porque interrumpe a los usuarios de teclado. Mueve el foco solo después de una activación intencional de navegación, según el contrato del componente, y proporciona al lector de pantalla un resultado claro.
Pregunta de seguimiento 4: ¿Cómo manejas el movimiento reducido?
Reduce o elimina el desplazamiento suave y las transiciones de marcadores, manteniendo al mismo tiempo un estado actual claro y un indicador de foco. La navegación debe seguir siendo comprensible sin animación.