ScrollArea
Área de rolagem — uma caixa de tamanho fixo cujo conteúdo rola de forma nativa — roda do mouse, toque e teclado — com barras de rolagem desenhadas pelo estilo. Use para um histórico de conversa, uma lista longa num card ou uma tabela mais larga que a tela.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o componente. Ele renderiza no cliente.
import { ScrollArea } from "@camaleo/react";Anatomia
A raiz recorta, o viewport rola. Dê uma altura à raiz, ou uma altura máxima para ela crescer com o conteúdo até ali e então rolar (uma largura, para rolar na horizontal): sem isso, a caixa só cresce com o conteúdo. As barras só aparecem quando há o que rolar.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da marca escolhidos na barra acima. Clique dentro de um e use as setas, ou aperte Tab até a caixa ganhar o anel de foco.
Uma linha, para o lado
No celular, uma linha de filtros que rola para o lado ocupa menos espaço que uma que quebra em quatro linhas. O chip cortado na borda mostra que tem mais.
Linhas longas
Logs, diffs e comandos perdem a forma quando quebram. Mantenha as linhas inteiras e deixe a caixa rolar para o lado.
Uma lista entre um título e um botão
Só rola a parte que cresce. O título e o botão "Novo projeto" ficam onde as pessoas esperam.
Nas duas direções
Uma planilha rola para os dois lados. Deixe a linha de cabeçalho e a primeira coluna fixas (sticky), para cada número manter seus rótulos.
Mensagens novas
Envie uma resposta. A mensagem mais nova rola até ficar visível, e o role="log" na lista faz o leitor de tela anunciá-la sem mover o foco.
Histórico de atividades
Com o nome do título
Quando o conteúdo transborda, o viewport entra na ordem do Tab. Dê role="region" à raiz e um nome com aria-labelledby, para a pessoa ouvir onde chegou.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Atividade recente
Equipe Financeiro · últimos 7 dias
Termos de uso
Atualizados em 01/03/2025. Leia antes de continuar.
Boas práticas
O título e a ação dele continuam à vista enquanto a lista se move.
A roda do mouse fica presa na caixa de dentro, e a pessoa perde a noção de qual está rolando. Encurte a lista de dentro ou deixe a página rolar.
Uma linha cortada ao meio e a barra visível avisam que a lista continua.
Sem barra e com uma altura que termina certinho numa linha, a lista parece completa. A maioria nunca vai achar os últimos itens.
Props
As outras props (style, className, role, aria-label…) vão para a raiz. Defina o tamanho nela.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria caixa.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* esmaece a borda de baixo enquanto há mais abaixo */
.feed [data-slot="scroll-area"][data-overflow-y-end] [data-slot="scroll-area-viewport"] {
mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent);
}
/* barras sempre com força total */
.feed { --cml-scrollbar-idle-opacity: 1; }Acessibilidade
- A rolagem continua nativa: roda do mouse, toque, teclado e a busca na página do navegador seguem funcionando.
- O viewport só é focável enquanto algo transborda, então quem usa teclado sempre alcança o conteúdo escondido (axe: scrollable-region-focusable).
- Dê um nome quando for uma região: role="region" com aria-label ou aria-labelledby na raiz.
- As barras servem ao ponteiro e ficam escondidas do leitor de tela (aria-hidden). Elas só esmaecem, nunca se movem, então movimento reduzido não pede nada a mais.