Desplazamiento y administración de contenido

1) Por qué pensar en desplazarse

• acelera la búsqueda del contenido deseado (menos clics - más skrolls),
• da una sensación de control (anclas, «volver al principio», filtros pegados),
• ahorra recursos (carga perezosa, virtualización),
• aumenta la conversión (el contenido se ve antes, el CTA se encuentra en la «zona del pulgar»).

Principios: velocidad> densidad; contexto> ruido; previsibilidad> «magia».

2) Modelos de desplazamiento: cuándo qué elegir

1. Paginación clásica

Adecuado para resultados de búsqueda, tablas, informes. Ventajas: control, URL estable, fácil navegación por páginas. Contras: más clics, «brechas» de atención.

2. Cinta infinita (infinite scroll)

Para feeds y directorios con bajo costo de error (noticias, tarjetas de contenido). Ventajas: participación, menos clics. Contras: «fondo perdido», difícil de volver, difícil de direccionar.

3. Híbrido: «Mostrar más «/« Descargar más »

Compromiso: los widgets son dosificados con paquetes en el botón. Pros: control de renders, disponibilidad de revestimientos, previsibilidad. Contras: Todavía es lineal.

4. Desplazamiento segmentado (secciones/anclajes)

Para artículos largos, referencias y wiki. Pros: mapa del documento, saltos rápidos. Contras: complicar la navegación y la tabla de contenido.

• Directorios/lobby - híbrido o infinito + «volver al principio».
• Buscar/tablas: paginación con tamaño de página y filtros rápidos.
• Documentación/longrid - segmentos con TAC y barra de lectura de progreso.

3) Arquitectura de la información y diseño

Tapa superior (sticky): búsqueda, filtros rápidos, clasificación; no se superpone al contenido cuando aparece.
Barra lateral (desktop): tabla de contenido (TAC), filtros; En el móvil de salida.
Elementos Sticky: filtros superiores, menú de anclaje, indicador de progreso de lectura, «Back to Top».
Mapas de contenido: la altura predecible de la vista previa → menos saltos de diseño.
Estados vacíos: esqueletos/simuladores, no «pantallas vacías».

4) Comportamiento de desplazamiento (micromecánico)

Inercia y física: el desplazamiento debe parecer «nativo»; no rompa los patrones del sistema.
Izquierda axial: en horizontes (carrusel), bloquee el eje vertical después del umbral de movimiento.
Puntos Snap: adecuados para carruseles, tarjetas y pasos del asistente. No abuse en cintas largas.
Scrolling anclado: Al cargar, mantenga el enfoque del usuario y la posición relativa.
Scroll-chaining: limite el «flujo» de eventos de los contenedores anidados para no «saltar» a la página.

5) Gestión de la atención

STA flotante/« Depósito »/» Jugar »: en la zona del pulgar, no superpone el contenido.
Barra de lectura de progreso: regla en la parte superior, sincronizada con los anclajes.
Tabla de contenido: la sección actual está resaltada, enlaces rápidos, botón «arriba».
Anclajes de encabezado: hashes estables en la URL; skroll con la compensación de la altura del sombrero.
Filtros contextuales «pegajosos»: asegurar después de desplazarse 1-2 pantallas.

6) Descarga y renderizado de cintas grandes

Carga perezosa (lazy): imágenes, videos, bloques. El umbral de carga es ~ 1-2 de la pantalla por delante.
Virtualización/renderizado de ventanas (windowing): dibuje sólo el área visible + búfer.
Playsholders/skeletones: dimensiones predecibles, sin «saltos».
Carga por lotes: paso 20-60 elementos; equilibrio entre solicitudes y renders.
Caché de sección: al volver atrás, recupere las posiciones y las chancas cargadas.

7) Administración de contenido en cinta

Agrupación: por fechas/categorías; los encabezados separadores se adhieren.
Ordenaciones y filtros: visibles y accesibles, con indicación de las condiciones activas.
Contraer/expandir: para descripciones largas, «Mostrar más».
Medios de comunicación en skroll: vídeo auto-pausa fuera del área visible; auto-plays sólo sin sonido y con control explícito.
Estados de error: «Pérdida de red», «No se puede cargar» - con retry y mantener la posición.

8) Accesibilidad y localización

Todas las acciones están disponibles sin gestos: botón «Descargar más», «Al principio», «Abrir TAC».
Control de enfoque: cuando navega por los anclajes, transfiere el enfoque al encabezado de la partición.
Lectores de pantalla: descripciones para botones de desplazamiento/TOS, lógica de orden.
RTL: espeje los carruseles horizontales y los indicadores.
Movimiento reducido: desactive las animaciones «complejas» y el paralaje para aquellos que prefieran efectos simplificados.

9) Performance: objetivos y métricas

INP (Interaction to Next Paint) de gestos clave/scroll: ≤ 200 ms.
Scroll-jank: <1% de fotogramas> 16,7 ms en los dispositivos típicos.
CLS (cambio de diseño acumulativo): ≤ 0,1 (especialmente durante la dosificación).
TBT/Blocking: evite los cálculos sincrónicos pesados durante el skroll.
Memoria: uso estable en sesiones largas (sin fugas en la virtualización).

• oyentes pasivos de scroll, computación diferida a través de 'requestAnimationFrame';
• sombras «ligeras »/sin blur complejo durante el desplazamiento;
• dimensiones fijas o predecibles de las tarjetas;
• ahorros en reescrituras (actualizaciones de batched).

10) Telemetría y eventos

• 'scroll _ start '/' scroll _ end' (fuente, velocidad, dirección),
• 'content _ load _ request/success/fail' (paquete, tamaño),
• 'viewport _ item _ exposed' (id, tiempo de visibilidad),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list _ restore' (posición, tiempo de recuperación).

• Depth Reached (cuántas pantallas/elementos se han visto),
• Exposure Time per Item (media/mediana),
• Load Error Rate, Retry Rate,
• Scroll Abdonment (publicado antes de cargar el siguiente lote),
• Return-to-Position Success.

11) Patrones para diferentes tipos de contenido

Catálogos de juegos/productos: cinta híbrida, filtros sticky, virtualización, botón Mostrar más.
Longrids/wiki: TEC, barra de progreso, anclas, «copiar el enlace a la sección».
Feed News: una cinta interminable con fechas divisorias, «volver a las últimas».
Tablas/Gridos: paginación + «mostrar por N», congelación de encabezados y columnas clave, scroll horizontal según sea necesario.
Live-feeds/logs-streams: auto-scroll con «pausa/ponerse al día», límite de búfer.

12) Características móviles

Zonas del pulgar: CTA y «al principio» - abajo; filtros - en la hoja de salida.
Estiramiento: mostrar sólo cuando se detiene; no interferir con el skroll.
Gestos: carruseles horizontales - con lock axial; pull-to-refresh - sólo donde se espera.
Suavidad: verificación de 60 FPS en listas «pesadas»; reduzca la densidad de efectos.

13) Antipatternas

«Cinta infinita + fondo oculto sin salida» (sin enlaces/contactos/reglas).
El dosificador que mueve lo leído es la pérdida de contexto.
Paneles flotantes que superponen texto y CTA.
Altura ilimitada de las tarjetas → «vagabundos» layout-shift's.
Reproducción automática de medios con sonido cuando aparece en el área de visibilidad.
La falta de recuperación de la posición con «atrás».

14) Lista de comprobación de la implementación (por sprints)

Sprint 1: selección del modelo (paginación/híbrido/infinito), contenedor skroll básico, tapón/filtros sticky, «Back to Top».
Sprint 2: carga perezosa de imágenes/bloques, esqueletos, tamaños predecibles de tarjetas.
Sprint 3: virtualización de listas, almacenamiento de posición y caché de paquetes, anclas/TOS.
Sprint 4: telemetría scroll y exhibiciones, así como alertas por scroll-jank.
Sprint 5: disponibilidad (enfoque/lectores), RTL, movimiento reducido, navegación por teclado (escritorio).
Sprint 6: optimización fina: control axial, puntos snap, mejora de medios UX en la cinta.

15) Glosario

Infinite Scroll - Carga infinita de elementos.
Windowing/Virtualization es un renderizado de sólo elementos visibles de la lista.
Anchored Scrolling - Mantener la posición relativa durante la dosificación.
Scroll-jank es un «twitch» debido a la falta de fotogramas al desplazarse.
Table of Contents (Table of Contents): tabla de contenido con anclas.
CLS/INP - métricas de estabilidad de diseño y capacidad de respuesta.

16) Resultado

1. selecciona el modelo de flujo adecuado (paginación/híbrido/infinito),

2. da control (anclas, TAC, filtros sticky, «al principio»),

3. renderizado rápido y estable (carga perezosa, virtualización, sin cambios),

4. sigue siendo accesible y predecible,

5. mide la telemetría y mejora el UX basado en datos.