ScrollArea New Alpha

Usage

Scroll Area wraps overflowing content in a custom scroll viewport. Native scrollbars are hidden and replaced with a thin overlay thumb that appears on hover or while scrolling — consistent across platforms and browsers.

Import the component — the import registers the custom element:

import "@nordhealth/components/lib/ScrollArea"

Then wrap your content and give the area a size:

Composition

Scroll Area is a single element. Slot your content directly inside it; the viewport, scrollbars, thumbs and corner are rendered internally in shadow DOM and exposed as parts.

nord-scroll-area
├── ::part(viewport)          the scrolling container (your slotted content)
├── ::part(scrollbar-block)   vertical scrollbar track
│   └── ::part(thumb-block)
├── ::part(scrollbar-inline)  horizontal scrollbar track
│   └── ::part(thumb-inline)
└── ::part(corner)            where the two scrollbars meet (axis="both")

<nord-scroll-area axis="both" style="block-size: 12rem">
  <!-- your content -->
</nord-scroll-area>

The axis attribute controls which scrollbars are rendered: block (vertical, the default), inline (horizontal), or both.

Add the fade attribute for a built-in edge fade (see the Edge fade example). Scroll Area also publishes the distance scrolled from each edge as the read-only CSS custom properties --scroll-area-overflow-y-start, --scroll-area-overflow-y-end, --scroll-area-overflow-x-start and --scroll-area-overflow-x-end on ::part(viewport), so advanced consumers can drive their own masks or effects.

Examples

Horizontal

Set axis="inline" for a horizontally scrolling area.

Both scrollbars

Set axis="both" when content overflows on both axes. A corner fills the space where the scrollbars meet.

Edge fade

Add the fade attribute to fade content in and out at the scroll edges, signalling there is more content beyond the edge. Tune the depth with the --n-scroll-area-fade-size custom property.

With axis="both", all four edges fade independently — each side fades only when there is more content beyond it.

RTL

Scroll Area is direction-aware. In a right-to-left context the block (vertical) scrollbar moves to the inline-start (left) edge.

Accessibility

• The viewport is a natively scrollable region, so keyboard scrolling (arrow keys, Page Up / Page Down, Home / End) works without custom handling, and the viewport stays in the tab order while it overflows.
• Give the area an aria-label when its purpose isn't already conveyed by a nearby heading, so screen reader users understand what the scrollable region contains.
• On touch devices (pointer: coarse) the custom scrollbar is suppressed and the platform's native scrolling takes over.