ScrollArea

A scroll region with custom, still accessible scrollbars.

Import
import { ScrollArea } from '@texuli/primitives/scroll-area';
Pattern
Scrollable region
Size budget
4.0 KiB gzip for @texuli/primitives/scroll-area
Reference
packages/primitives/docs/prim-scroll-area.md

Live demo

Loading the ScrollArea demo…

Anatomy

ScrollArea anatomy: each box holds the parts inside it.
  • ScrollArea.Root
    • ScrollArea.Viewport
    • ScrollArea.Scrollbar
      • ScrollArea.Thumb
    • ScrollArea.Corner

Behavior checks

tests/behavior/scenarios/scroll-area.spec.ts runs 5 rows against the ScrollArea scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 5 rows
  1. the viewport scrolls with pointer wheel and keeps content reachable
  2. focused viewport scrolls with PageDown and ArrowDown
  3. custom scrollbar chrome is aria-hidden when present
  4. the scroll area root is named for assistive tech
  5. the scroll area scenario has no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/scroll-area (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).