ScrollArea

ScrollArea hides native scrollbars and renders Windows 98 scrollbar chrome around overflowing content.

Props

Prop	Type	Default	Description
`className`	`string`	-	Sets dimensions and frame styling.
`children`	`ReactNode`	-	Scrollable content.

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/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.