Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Preview Code

Tags

Interactive

Features

  • Scrollbar sits on top of the scrollable content, taking up no space.
  • Scrolling is native; no underlying position movements via CSS transformations.
  • Shims pointer behaviors only when interacting with the controls.
  • Supports Right to Left direction.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c scroll-area

Anatomy

Import all parts and piece them together.

Typescript
import {
  ScrollArea,
  ScrollBar
} from '@/ui/scroll-area';
Html
<ScrollArea>
  <!-- content -->
  <ScrollBar orientation="vertical" />
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference

Root

Contains all the parts of a scroll area.

PropTypeDefault
type 'auto' | 'always' | 'scroll' | 'hover' 'hover'
Describes the nature of scrollbar visibility: auto shows when content overflows, always keeps them visible, scroll shows during scrolling, hover shows when hovering.
scrollHideDelay number 600
Duration in ms from when the mouse leaves the scroll area until the scrollbar hides. Only applies when type is scroll or hover.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-orientation]"vertical" | "horizontal"

Viewport

The viewport area of the scroll area.

Scrollbar

The vertical or horizontal scrollbar.

PropTypeDefault
orientation 'vertical' | 'horizontal' 'vertical'
The orientation of the scrollbar.
forceMount boolean —
Used to force mounting when more control is needed.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"visible" | "hidden"
[data-orientation]"vertical" | "horizontal"

Thumb

The thumb to be used in the scrollbar.

Corner

The corner where both scrollbars meet.

Examples

Basic

A simple scroll area with vertical scrollbar.

Html
<ScrollArea class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
    @for (tag of tags; track tag) {
      <div class="text-sm">{{ tag }}</div>
      <Separator class="my-2" />
    }
  </div>
</ScrollArea>

Horizontal scrolling

A scroll area with horizontal scrollbar.

Html
<ScrollArea class="w-96 whitespace-nowrap rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    @for (artwork of artworks; track artwork.name) {
      <figure class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            [src]="artwork.src"
            [alt]="artwork.name"
            class="aspect-[3/4] h-fit w-fit object-cover"
          />
        </div>
        <figcaption class="pt-2 text-xs text-muted-foreground">
          {{ artwork.name }}
        </figcaption>
      </figure>
    }
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Both scrollbars

A scroll area with both vertical and horizontal scrollbars.

Html
<ScrollArea class="h-[300px] w-[300px] rounded-md border">
  <div class="p-4 w-[500px]">
    <h4 class="mb-4 text-sm font-medium leading-none">Large Content</h4>
    <p class="text-sm">
      This content is larger than the container,
      requiring both scrollbars.
    </p>
    <!-- More content here -->
  </div>
  <ScrollBar orientation="vertical" />
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Always visible scrollbar

Keep the scrollbar always visible.

Html
<ScrollArea type="always" class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <!-- Content that overflows -->
  </div>
</ScrollArea>

Accessibility

Adheres to the Scrollbar ARIA pattern .

Keyboard Interactions

KeyDescription
Arrow keys Scrolls content when focused within the scroll area.
Page Up / Page Down Scrolls content by a page.
Home / End Scrolls to the top/bottom of the content.