ScrollArea

A scroll container with thin, token-coloured scrollbars. Scrolling stays native: wheel, touch, keyboard, find-in-page and scroll anchoring all work, and nothing is re-implemented in JavaScript.

import { ScrollArea } from "@meridui/react";

export function Example() {
  return (
    <ScrollArea maxHeight={200} label="Release history">
      <ul>
        {releases.map((release) => (
          <li key={release}>{release}</li>
        ))}
      </ul>
    </ScrollArea>
  );
}

Import

import { ScrollArea } from "@meridui/react";

Examples

Horizontal, scrollbar on hover

orientation picks the axis ("vertical", "horizontal" or "both"). autoHide shows the scrollbar only while the area is hovered or has focus, on devices with a fine pointer.

<ScrollArea orientation="horizontal" autoHide label="Tags">
  <div style={{ display: "flex", gap: 8, width: "max-content" }}>
    {tags.map((tag) => (
      <Badge key={tag}>{tag}</Badge>
    ))}
  </div>
</ScrollArea>

API reference

Accepts every <div> attribute.

Styling

The scrollbar uses scrollbar-width: thin and scrollbar-color (plus ::-webkit-scrollbar for older Safari). In forced-colours mode the system scrollbar is used.

Accessibility

When the content overflows and contains nothing focusable, the area becomes role="region" with tabIndex={0} and the label as its name, so keyboard users can reach it and scroll with the arrow keys (WCAG 2.1.1). When it holds links or buttons it stays out of the Tab order: focusing those scrolls the area.

Related

• Table: has its own horizontal scroll frame (scrollLabel).
• Command: its list scrolls natively in the same way.