Scroll Area

RzScrollArea provides a themed, accessible viewport for overflow content with Radix-style behavior. You can use its built-in scrollbars or opt into fully custom tracks with ScrollBar.

Radix UI aligned API

RizzyUI scroll areas follow the same conceptual model as Radix Scroll Area: a viewport, one or more scrollbars, and an optional corner when both axes are visible.

Basic Vertical Scroll

The default configuration renders a vertical scrollbar automatically.

Source

<RzScrollArea class="h-56 w-full rounded-md border">
  <div class="space-y-3 p-4">
    @for (var i = 1; i <= 20; i++)
    {
      <div class="rounded border bg-background px-3 py-2 text-sm">
        Scrollable item @i
      </div>
    }
  </div>
</RzScrollArea>

Horizontal + Perpendicular Scrollbar

Set Orientation to control the primary axis, and set ShowBothScrollbars to render the perpendicular scrollbar as well.

Source

<RzScrollArea Orientation="Orientation.Horizontal"
              ShowBothScrollbars="true"
              class="h-56 w-full rounded-md border">
  <div class="w-[640px] p-4">
    Wide content...
  </div>
</RzScrollArea>

Custom ScrollBar Components

Disable default tracks with ShowDefaultScrollBar, then render ScrollBar components yourself. This gives full control over which bars are present.

Source

<RzScrollArea Orientation="Orientation.Horizontal"
              ShowDefaultScrollBar="false"
              Type="ScrollAreaType.Always"
              class="relative h-56 w-full rounded-md border">
  <div class="w-[640px] p-4">
    Wide content...
  </div>

  <ScrollBar Orientation="Orientation.Vertical" />
  <ScrollBar Orientation="Orientation.Horizontal" />
</RzScrollArea>

Scrollbar Visibility Modes

Use the Type parameter to control when the scrollbar is visible: Hover, Scroll, Auto, or Always. ScrollHideDelay controls hide timing for non-always modes.

Source

<RzScrollArea Type="ScrollAreaType.Hover" ScrollHideDelay="600" />
<RzScrollArea Type="ScrollAreaType.Scroll" ScrollHideDelay="400" />
<RzScrollArea Type="ScrollAreaType.Auto" />
<RzScrollArea Type="ScrollAreaType.Always" />

Component Parameters

RzScrollArea

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`	`null`	Content rendered inside the scroll viewport.
`Orientation`	`Orientation`	`Vertical`	Primary scroll axis. Determines viewport overflow direction and default scrollbar orientation.
`Type`	`ScrollAreaType`	`Hover`	Scrollbar visibility behavior.
`ScrollHideDelay`	`int`	`600`	Delay in milliseconds before hiding non-persistent scrollbars.
`ShowDefaultScrollBar`	`bool`	`true`	When true, RzScrollArea renders built-in scrollbar tracks.
`ShowBothScrollbars`	`bool`	`false`	When true, renders both horizontal and vertical built-in tracks.

ScrollBar

Property	Type	Default	Description
`Orientation`	`Orientation`	`Vertical`	Scrollbar track direction for the custom bar.