Rolar e gerenciar conteúdo

1) Por que pensar em rolar

• acelera a busca de conteúdo adequado (menos cliques - mais scrolls),
• dá uma sensação de controle (âncora, «voltar ao início», filtros colados),
• economiza recursos (download preguiçoso, virtualização),
• aumenta a conversão (conteúdo visto antes, CTA em «área do polegar»).

Princípios: velocidade> densidade; contexto> ruído; previsibilidade> «magia».

2) Modelos de rolagem: quando escolher

1. Paginação clássica

Adequado para resultados de pesquisa, tabelas, relatórios. Mais: controle, URL estável, navegação fácil nas páginas. Menos, mais cliques, «quebras» de atenção.

2. Fita infinita (infinite scroll)

Para Fids e diretórios com baixo custo de erro (notícias, cartões de conteúdo). Os benefícios, o envolvimento, menos cliques. «Futer perdido», difícil de voltar, difícil de direcionar.

3. Híbrido «Mostrar mais «/« Carregar mais »

Comprometimento: Os widgets são carregados com pacotes no botão. Os benefícios são controle de renders, disponibilidade de futer, previsibilidade. Contras, ainda é linear.

4. Rolagem segmentada (seções/âncoras)

Para artigos longos, ajuda e wiki. Vantagens: mapa do documento, saltos rápidos. Contras: dificuldade de navegação e sumário.

• Diretórios/lobbies - híbrido ou infinito + «voltar ao início».
• Pesquisa/tabela - paginação com tamanho de página e filtros rápidos.
• Documentação/Longrid - segmentos com TOC e bar de leitura progressiva.

3) Arquitetura de informação e disposição

Chapéu superior (sticky): pesquisa, filtros rápidos, ordenamento; não sobrepõe o conteúdo ao aparecer.
Painel lateral (desktop): sumário (TOC), filtros; No mobil, um sheet a sair.
Elementos Sticky: filtros superiores, menu âncora, indicador de leitura progressiva, «Back to Top».
Cartões de conteúdo: alta previsível → menos saltos de layout.
Estados em branco: esqueletos/shimmer, não «telas vazias».

4) Comportamento de rolagem (micromecânica)

Inércia e física: A rolagem deve parecer nativa; Não quebrem os patterns do sistema.
Barra de eixo: Bloqueie o eixo vertical após o limite de movimento.
Pontos Snap: Apropriados para carrossel, cartões e passos do mestre. Não use fitas longas.
Anchored scrolling: mantenha o foco do usuário e a posição relativa ao pré-uso.
Scroll-chaining: Limite o «fluxo» de eventos dos contêineres anexados para não «saltar» para a página.

5) Controle de atenção

100/Depósito/Jogar flutuante: na área do polegar, não bloqueia o conteúdo.
Bar de leitura progressiva: régua acima, sincronizada com âncoras.
Sumário (TOC): a seção atual está realçada, links rápidos, botão acima.
Âncoras de cabeçalho: hashs estáveis em URL; scroll com compensação da altura do chapéu.
Os filtros contextuais «pegajosos» são fixados após rolar 1-2 telas.

6) Carregar e renderizar grandes fitas

Download preguiçoso (lazy): imagens, vídeos, blocos. O limite de alongamento é £1-2 tela à frente.
Viralizar/render de janela (windowing): Desenha apenas a área visível + tampão.
Playsholders/esqueletos: dimensões previsíveis, sem «corrida».
Dosagem em lotes: etapa 20-60 elementos; equilíbrio entre solicitações e renders.
Caixa de seções: quando voltar, recupere as posições e as barras carregadas.

7) Gerenciamento de conteúdo na fita

Agrupamento em datas/categorias; Os cabeçalhos estão colados.
Triagens e filtros: visíveis e disponíveis, com um indicador de condições ativas.
Reduzir/expandir: Para descrições longas, «Mostrar mais».
Mídia em scroll: vídeo de pausa automática fora da área visível; auto-plays apenas sem som e com controle claro.
Os estados de erro são «Perda de rede», «Não foi possível carregar» - com retry e preservação de posição.

8) Disponibilidade e localização

Todas as ações estão disponíveis sem sinais, como o botão «Carregar mais», «Iniciar», «Abrir o TOC».
Gestão de foco: ao navegar em âncoras, transfere o foco para o cabeçalho da seção.
Leitores de tela: descrições para botões de rolagem/TCE, lógica de ordem.
VERF: Espelhe os carrosséis horizontais e os indicadores.
Reduced motion: Desabilite animações «complexas» e paralax para efeitos simplificados preferenciais.

9) Performance: objetivos e métricas

INP (Interaction to Next Paint) sinais-chave/scroll: ≤ 200 ms.
Scroll-jank (omissão de quadros no scroll): <1% de quadros> 16,7 ms em frames típicos.
CLS (mudança de layout cumulativo): ≤ 0,1 (especialmente durante a pré-carga).
TBT/Blocking: evite a computação sincronizada pesada durante o scroll.
Memória: uso estável em sessões longas (sem vazamentos de virtualização).

• Ouvintes passivos do scroll, cálculos adiados através de 'requestAnimationFrame';
• sombras «leves »/sem blur complicado durante a rolagem;
• tamanhos fixos ou previsíveis de cartões;
• poupança de desenho (batched updates).

10) Telemetria e eventos

• 'scroll _ start '/' scroll _ end' (origem, velocidade, direção),
• 'conteúdo _ load _ request/sucess/fail' (tamanho, maço),
• 'viewport _ item _ exposed' (id, tempo de visibilidade),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'lista _ restore' (posição, tempo de recuperação).

• Depth Reached (quantas telas/itens foram visualizados),
• Exposure Time per Item (média/mediana),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (saído antes de carregar o próximo lote),
• Return-to-Position Success.

11) Pattern para diferentes tipos de conteúdo

Catálogos de jogos/produtos: fita híbrida, filtros sticky, virtualização, botão Mostrar mais.
Longrides/wiki: TOC, Progress Bar, âncoras, «copiar o link para a seção».
Uma fita sem fim com datas separadoras, «voltar aos últimos».
Tabelas/grades: paginação + «mostrar por N», congelamento de cabeçalhos e colunas-chave, scroll horizontal por necessidade.
Fitas ao vivo/logs striam: auto-scroll com «pausa/alcançar», limite de tampão.

12) Características móveis

As zonas do polegar são CTA e «para o início», em baixo; filtros - no sheet de saída.
«Esticar» o púlpito: exibir apenas quando parar; Não atrapalhes o scroll.
Gestos: carrossel horizontal - com loca de axé; pull-to-refresh - apenas onde é esperado.
Fluidez: verificação de 60 FPS em listas pesadas; reduza a densidade dos efeitos.

13) Antipattern

«Fita infinita + púlpito oculto sem saída» (sem links/contatos/regras).
O que move o que leu é a perda de contexto.
Painéis flutuantes que sobrepõem texto e CTA.
A altura ilimitada dos cartões → «vagabundos» layout-shift' s.
Impermeabilização automática de mídia com som ao aparecer na área de visibilidade.
Não restabelece a posição com «para trás».

14) Folha de cheque de implementação (por sprins)

Sprint 1: seleção de modelo (paginação/híbrido/infinito), contêineres scroll básicos, sticky-chapéu/filtros, «Back to Top».
Sprint 2: carregamento preguiçoso de imagens/blocos, esqueletos, dimensões previsíveis de cartões.
Sprint 3: virtualização das listas, armazenamento da posição e armazenamento em dinheiro de pacotes, âncora/TCE.
Sprint 4: Telemetria scroll e exposição e alertas scroll-jank.
Sprint 5: disponibilidade (foco/leitores), RENAULT, reduced motion, navegação por teclado (desktop).
Sprint 6: otimização fina: cabelo de axé, pontos de snap, melhoria da mídia UX na fita.

15) Glossário

Infinite Scroll é uma substituição infinita de elementos.
Windowing/Virtualization - render apenas itens visíveis da lista.
Anchored Scrolling - Mantém a posição relativa no pré-sal.
O Scroll-jank é um «derganha» por causa da omissão de quadros durante a rolagem.
TOC - Sumário com âncoras.
CLS/INP - métricas de estabilidade de layout e ressocialidade.

16) Resultado

1. seleciona um modelo de fluxo adequado (paginação/híbrido/infinito),

2. dá controle (âncora, TOC, filtros sticky, «para o início»),

3. renderite rápido e estável (download preguiçoso, virtualização, sem alterações),

4. continua disponível e previsível,

5. mede a telemetria e melhora a UX baseada em dados.