ScrollArea

A native scroll container with thin overlay scrollbars and edge fades that appear only where more content lies beyond.

When to use

• Bounded lists inside cards and panels: logs, activity feeds, menus.
• Horizontal rows of chips or cards, with optional scroll snap.
• Not for a whole page: let the document scroll. Not for collapsing content: use ExpandableText or Accordion.

Usage

import { ScrollArea } from "@/components/iris/scroll-area/scroll-area";

h(ScrollArea, { maxHeight: 240, label: "Project log" }, rows);

h(ScrollArea, { orientation: "horizontal", snap: "x mandatory", label: "Collections" }, chips);

Props

Prop	Type	Default	Description
children	ReactNode	—	Scrollable content.
orientation	"vertical" | "horizontal" | "both"	"vertical"	Axes that scroll.
maxHeight	CSS maxHeight	—	Max viewport height, for vertical areas that grow with content. Otherwise give the root a height.
fade	number	28	Edge fade length in px; 0 turns fades off.
scrollbars	"auto" | "always"	"auto"	auto shows bars while scrolling or hovering; always keeps them while content overflows.
hideDelay	number	900	How long bars linger after scrolling stops, in ms.
snap	CSS scrollSnapType	—	e.g. "x mandatory"; children set their own scroll-snap-align.
label	string	—	Accessible name. Makes the viewport a labelled, focusable region that arrow and page keys scroll.
wheelToHorizontal	boolean	true	Maps vertical wheel movement to horizontal scrolling for horizontal areas.
onScroll	(event) => void	—	Viewport scroll handler.
onEdgeChange	(edges: { top, bottom, left, right }) => void	—	Fires when content starts or stops extending past an edge.
viewportRef, viewportClassName, viewportStyle			Access and style the inner viewport.

Notes

• Scrolling stays native, so keyboard, touch momentum, and scroll snap behave as the platform expects; the custom bars are draggable overlays.
• Fades scale with how much content remains past each edge.
• Scrollbar fade-in/out respects reduced motion.
• The thumb is a pill in --ink, mixed down to 30 % (46 % under the pointer or while dragged).