ScrollArea

Browse content inside a bounded scroll area.

Basic usage

Project 1

Project 2

Project 3

Project 4

Project 5

Project 6

Project 7

Project 8

Project 9

Project 10

Project 11

Project 12

Project 13

Project 14

Project 15

Project 16

Project 17

Project 18

Project 19

Project 20

basic.tsx

import { ScrollArea } from '@ifhover/leaf-ui';

export function ScrollAreaBasic() {
  return (
    <ScrollArea height={180} aria-label="Project list">
      {Array.from({ length: 20 }, (_, i) => (
        <div key={String(i)} style={{ padding: '12px 16px' }}>
          Project {i + 1}
        </div>
      ))}
    </ScrollArea>
  );
}

More examples

Scroll horizontally

advanced.tsx

import { Card, ScrollArea, Space } from '@ifhover/leaf-ui';

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea orientation="horizontal" aria-label="Horizontal cards">
      <Space size={12}>
        {['A', 'B', 'C', 'D', 'E'].map((name) => (
          <Card key={name} title={name} style={{ width: 180, flex: 'none' }}>
            Scroll horizontally
          </Card>
        ))}
      </Space>
    </ScrollArea>
  );
}

Usage

Constrain the region with height or maxHeight. orientation controls the axes and scrollbar controls visibility. Wheel, touch and keyboard scrolling use native scrolling behavior.

Overlay scrollbars fade in on hover without taking up content space. The forwarded ref points to the scrolling viewport; style and className apply to the outer wrapper. See Scrollbar for styling and keyboard controls. When content fits or reaches a boundary, the wheel continues scrolling the page.

Types

Import these types for data, callbacks and refs.

import type { ScrollAreaProps } from '@ifhover/leaf-ui';

ScrollAreaProps API

Property	Type	Default	Description
`height`	`CSSProperties['height']`	—	Height, numbers are in pixels
`maxHeight`	`CSSProperties['maxHeight']`	—	Maximum height
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Scrolling direction
`scrollbar`	`'auto' \| 'always' \| 'hidden'`	`'auto'`	Scrollbar visibility
`viewportClassName`	`string`	—	Class for the scrolling viewport.
`viewportStyle`	`CSSProperties`	—	Styles for the scrolling viewport.
`contentClassName`	`string`	—	Class for the content container.
`contentStyle`	`CSSProperties`	—	Styles for the content container.
`verticalOffset`	`number`	`0`	Top inset for the vertical track.

#ScrollArea

#Basic usage

#More examples

A

B

C

D

E

#Usage