Scroll Area — Vanilla

Scrollable area with themed scrollbar. Ensure Rizzo CSS is loaded.

Scroll Area

Give the wrapper a fixed height (or width for horizontal). Use scroll-area and scroll-area__viewport. Add scroll-area--horizontal for horizontal scrolling.

Add this component

The command below includes <strong>ScrollArea</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

Tags

v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1

HTML

html html 
<div class="scroll-area" style="height: 18rem; width: 12rem;">
  <div class="scroll-area__viewport" tabindex="0">
    <div style="padding: var(--spacing-4);">
      <h4 style="margin: 0 0 var(--spacing-4) 0; font-size: var(--font-size-sm); font-weight: 600;">Tags</h4>
      <div style="font-size: var(--font-size-sm); margin-bottom: var(--spacing-2);">v1.2.0-beta.20</div>
      <div style="font-size: var(--font-size-sm); margin-bottom: var(--spacing-2);">v1.2.0-beta.19</div>
      <!-- ... -->
    </div>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React