Scroll Area

Quando usar

Use o scroll area sempre que uma lista ou tabela puder crescer alem do espaco disponivel: book de ofertas, historico de ordens, tabela de cotacoes com muitas colunas. E o componente padrao para rolagem dentro do produto porque troca a barra nativa do sistema operacional (que varia de espessura e cor entre Windows, macOS e cada navegador) por uma barra fina e consistente, que nao compete por atencao com preco e profundidade de livro numa tela de trading. Suporta rolagem vertical e horizontal ao mesmo tempo, o caso comum de uma tabela de cotacoes com mais colunas do que cabem na largura disponivel.

Quando nao usar

Nao use scroll area para envolver a pagina inteira: rolagem de pagina e nativa do navegador e deve continuar nativa, inclusive por performance em listas muito longas. Para paginas com milhares de linhas, pagine ou virtualize a lista antes de rolar; o scroll area resolve a apresentacao da barra, nao o volume de dados renderizados.

Anatomia

• ScrollArea (data-slot="scroll-area"): a raiz. Define a altura e a largura visiveis via className (por exemplo h-40 w-72) e corta qualquer conteudo que passe disso.
• ScrollAreaViewport (data-slot="scroll-area-viewport"): a janela que realmente rola. O conteudo (tabela, lista) vai dentro dela.
• ScrollAreaScrollbar (data-slot="scroll-area-scrollbar"): a trilha da barra, com orientation="vertical" ou "horizontal". Use uma para cada direcao que precisar.
• ScrollAreaThumb (data-slot="scroll-area-thumb"): a alca que o usuario arrasta, em bg-border (fina e neutra de proposito, nunca o ciano da marca).
• ScrollAreaCorner (data-slot="scroll-area-corner"): o quadrado onde as duas barras se encontram, quando ambas estao presentes.

Composicao tipica, com as duas direcoes:

<ScrollArea className="h-40 w-72 rounded-md border border-border-subtle">
  <ScrollAreaViewport>{/* tabela ou lista */}</ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaCorner />
</ScrollArea>

Tipo de exibicao

ScrollArea aceita a prop type do Radix ("hover", "scroll", "auto" ou "always"). O padrao ("hover") mostra a barra so enquanto o ponteiro esta sobre a area, o que funciona bem para paineis secundarios. Para tabelas centrais de trading, onde a rolagem e frequente e a presenca de mais dados fora da tela precisa ficar obvia, prefira type="always".

Acessibilidade

O viewport e focavel por teclado quando o conteudo excede o espaco visivel: com foco nele, as setas, Page Up/Page Down, Home e End rolam o conteudo, o mesmo comportamento que o usuario ja espera de qualquer area rolavel nativa. A alca (ScrollAreaThumb) recebe uma area de toque minima de 24px mesmo quando a barra visual e mais fina do que isso, via uma camada invisivel por baixo do traco visivel, para nao penalizar precisao em tela sensivel ao toque.