Scroll area – Tsunami

Usage

Add .scroll-area to a box with a set height or max-height. Overflowing content scrolls inside the box, and the scroll does not spread to the page. Add tabindex="0" for keyboard scrolling and an aria-label for a name. For a frame, put it in a .card.

Stock sync #10 29 Oct 18:00
Stock sync #9 29 Oct 17:00
Stock sync #8 29 Oct 16:00
Stock sync #7 29 Oct 15:00
Stock sync #6 29 Oct 14:00
Stock sync #5 29 Oct 13:00
Stock sync #4 29 Oct 12:00
Stock sync #3 29 Oct 11:00
Stock sync #2 29 Oct 10:00
Stock sync #1 29 Oct 09:00

<div class="card">
  <div class="scroll-area" tabindex="0" aria-label="Sync history" style="height: 12rem">
    <ol class="timeline">
      <li>Stock sync #10 <time datetime="2026-10-29T18:00">29 Oct 18:00</time></li>
      <li>Stock sync #9 <time datetime="2026-10-29T17:00">29 Oct 17:00</time></li>
      <li>Stock sync #8 <time datetime="2026-10-29T16:00">29 Oct 16:00</time></li>
      <li>Stock sync #7 <time datetime="2026-10-29T15:00">29 Oct 15:00</time></li>
      <li>Stock sync #6 <time datetime="2026-10-29T14:00">29 Oct 14:00</time></li>
      <li>Stock sync #5 <time datetime="2026-10-29T13:00">29 Oct 13:00</time></li>
      <li>Stock sync #4 <time datetime="2026-10-29T12:00">29 Oct 12:00</time></li>
      <li>Stock sync #3 <time datetime="2026-10-29T11:00">29 Oct 11:00</time></li>
      <li>Stock sync #2 <time datetime="2026-10-29T10:00">29 Oct 10:00</time></li>
      <li>Stock sync #1 <time datetime="2026-10-29T09:00">29 Oct 09:00</time></li>
    </ol>
  </div>
</div>

Horizontal scrolling

Content wider than the box, like a table with many columns, scrolls sideways inside the box without overflowing the page.

Product	SKU	Stock	Price	Sold
T-shirt	TS-001	120	$24.00	842
Tote bag	TB-014	36	$36.00	215
Cap	CP-007	0	$18.00	530

<div class="card">
  <div class="scroll-area" tabindex="0" aria-label="Products">
    <table class="table" style="min-width: 64rem">
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col">SKU</th>
          <th scope="col">Stock</th>
          <th scope="col">Price</th>
          <th scope="col">Sold</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>T-shirt</td><td>TS-001</td><td>120</td><td>$24.00</td><td>842</td></tr>
        <tr><td>Tote bag</td><td>TB-014</td><td>36</td><td>$36.00</td><td>215</td></tr>
        <tr><td>Cap</td><td>CP-007</td><td>0</td><td>$18.00</td><td>530</td></tr>
      </tbody>
    </table>
  </div>
</div>

Attributes

Attribute / element	Values	Description
`.scroll-area`		Scrolls both ways with a thin, border-coloured scrollbar. The scroll does not spread to the page (`overscroll-behavior: contain`)
`height`, `max-height`	CSS length	Required. Set it in page CSS or `style`. No default.
`tabindex`	`0`	Makes it focusable and scrollable with arrows, Page Up and Page Down
`aria-label`	Text	Name of the region for screen readers when it is focusable