ScrollArea

ScrollArea hides native scrollbars and renders Windows 98 scrollbar chrome around overflowing content. Both vertical and horizontal scrollbars appear automatically when content overflows.

ScrollAreaLegacy is an older imperative-DOM variant that creates scrollbar elements directly. Prefer ScrollArea for new code.

Props

Export	Key props	Description
`ScrollArea`	`className`, div props	Declarative compound component with observer-based scrollbar sync.
`ScrollAreaLegacy`	`className`, div props	Imperative DOM variant using `useScrollbar` internally. Provided for backward compatibility.

Examples

Scrollable list

Item 01
Item 02
Item 03
Item 04
Item 05
Item 06
Item 07
Item 08
Item 09
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18

import { ScrollArea } from '@murasaki-io/react98'
 
const rows = Array.from({ length: 18 }, (_, index) => `Item ${String(index + 1).padStart(2, '0')}`)
 
export function ScrollAreaBasicDemo(): React.ReactElement {
  return (
    <ScrollArea className="h-32 w-64 bg-(--window) shadow-(--shadow-border-field)">
      <ul className="m-0 list-none p-1.5">
        {rows.map(row => (
          <li key={row} className="px-1.5 py-0.5 hover:bg-(--hilight) hover:text-(--hilight-text)">
            {row}
          </li>
        ))}
      </ul>
    </ScrollArea>
  )
}

ARIA

ScrollArea keeps the content in normal DOM order. Add roles and labels to the content when needed.

Keyboard

ScrollArea does not make the frame focusable. Keyboard scrolling depends on the focusable content you place inside it.

SSR

Scrollbars are measured after mount. Give the root a stable width and height to avoid layout shifts.