> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/scroll-area.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# 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

Copy code

```tsx lineNumbers file="../../../src/examples/en/scroll-area/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>
  );
}
```

Expand code

## More examples


### A

Scroll horizontally

### B

Scroll horizontally

### C

Scroll horizontally

### D

Scroll horizontally

### E

Scroll horizontally

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/scroll-area/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>
  );
}
```

Expand code

## 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](https://ifhover.github.io/leaf-ui/en/components/scrollbar.md) 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.

```ts
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.  |