Vox Mente
Navegação

Componentes

Scroll Area

beta

Rolagem contida com barra estilizada. Só funciona com altura definida no contêiner — sem isso não rola nada.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/scroll-area

Playground
<ScrollArea className="h-48 rounded-md border p-3">
  <div className="flex flex-col gap-2 text-sm">
    <p>Ana Beatriz — trilha de leitura</p>
    <p>Bruno Carvalho — trilha de leitura</p>
  </div>
</ScrollArea>

Uso

Rola uma lista longa dentro de um espaço fixo, sem empurrar o resto da página. A barra de rolagem vem desenhada pelo componente, não pelo navegador.

Altura precisa vir do contêiner

O viewport interno usa `size-full`: ele preenche a altura do contêiner, mas não cria uma. Sem uma altura fixa (`h-*` ou um pai com altura definida), o conteúdo cresce e nada rola.

Rolagem horizontal

A mesma regra vale no sentido oposto: para rolar na horizontal, o contêiner precisa de uma largura definida menor que a do conteúdo.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ScrollArea

PropTipoPadrão
viewportProps(Omit<ScrollAreaViewportProps, "ref"> & RefAttributes<HTMLDivElement>)—
viewportRefRef<HTMLDivElement>—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ScrollBar não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css