Scroll area

Usage

Add .scroll-area to a container with a bounded height or width. It applies overflow: auto, a thin scrollbar, and theme-aware colors. Wheel, touch, keyboard, and scrollbar dragging remain native. It needs no JavaScript initialization.

<div class="scroll-area p-4" style="width: 12rem; height: 18rem"
  tabindex="0" role="region" aria-labelledby="release-tags-title">
  <h2 id="release-tags-title" class="title-small mt-0">Tags</h2>
  <ul>
    <li>v1.2.0-beta.50</li>
    <li>v1.2.0-beta.49</li>
    <!-- More tags -->
  </ul>
</div>

Give a generic scroll region tabindex="0" and an accessible name so keyboard users can focus and scroll it. Keep padding for child focus rings. In a flex or grid layout, add min-h-0 or min-w-0 when the scroll container needs to shrink.

Horizontal scrolling

The same class scrolls horizontally when content exceeds the container's width.

<div class="scroll-area p-2" style="max-width: 24rem"
  tabindex="0" role="region" aria-label="Release channels">
  <div class="inline-flex gap-3 text-nowrap">
    <span class="surface-container p-4">Stable releases</span>
    <span class="surface-container p-4">Beta releases</span>
    <span class="surface-container p-4">Nightly builds</span>
    <span class="surface-container p-4">Archived releases</span>
  </div>
</div>

Page scrollbar

Add the class to <html> to style the page's own scrollbar. The viewport keeps native scrolling, and the thumb color follows the theme.

<html lang="en" class="scroll-area">

Custom styling

Set these properties on the scroll container or an ancestor.

.release-tags {
  --scroll-area-thumb-color: var(--md-sys-color-primary);
  --scroll-area-track-color: var(--md-sys-color-surface-container);
}

Use colors with enough contrast against the track and container. Native scrollbar styling follows the browser and operating system, so shape, exact width, and automatic hiding can differ. Older WebKit engines use rounded 8px scrollbars. Forced-colors mode restores system colors and the default width.

For a selective Sass build, include "scroll-area" in $utilities.