Un contenedor con scroll y la misma barra redondeada en todos los navegadores, Firefox incluido, con desplazamiento nativo.
Instalación
Agrégalo con el CLI de shadcn o copia el código a mano.
$ pnpm dlx shadcn@latest add @ssntl/scroll-areaReferencia de API
ScrollArea
aria-label?Tipo:stringNames the scrolling region for keyboard and screen reader users.Por defecto:—type?Tipo: —Por defecto:"hover"
También acepta todos los props de Radix ScrollArea.Root.
ScrollBar
orientation?Tipo: —Por defecto:"vertical"
También acepta todos los props de Radix ScrollArea.Scrollbar.
Reglas
Lo que este componente espera de ti, tal como se instala en components/ui/scroll-area.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).
## Reglas de Scroll area
- La misma barra en todas partes, Firefox incluido: un riel en píldora de 8px con un pulgar en píldora de 6px anidado 1px adentro, así las curvas son concéntricas.
- El desplazamiento sigue siendo nativo (rueda, toque, teclado, buscar en la página); solo se dibuja la barra.
- El área recibe foco con un anillo visible; dale un `aria-label` para que la región tenga nombre.
- `type="hover"` muestra la barra al pasar el cursor o al desplazar; usa "always" cuando la gente deba ver que hay más.
- El pulgar sobre el riel es `--input` sobre `--muted`, 3:1 o más en ambos temas, revisado en el lint.