Scroll Area

A scrollable container with customized scrollbar styling.

Basic Usage

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

dart
1
2
3
4
5
6
7
DScrollArea(
  maxHeight: '200px',
  children: [
    for (var i = 1; i <= 20; i++)
      p(classes: 'py-2', [Component.text('Item $i')]),
  ],
)

Orientation

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
dart
1
2
3
4
5
6
7
8
9
DScrollArea(
  orientation: DScrollOrientation.horizontal,
  children: [
    div(classes: 'flex gap-4 p-4', [
      for (var i = 1; i <= 10; i++)
        div(classes: 'w-32 h-24 bg-zinc-800 rounded-lg', [...]),
    ]),
  ],
)

Scrollbar Visibility

Always visible:

Always visible item 1

Always visible item 2

Always visible item 3

Always visible item 4

Always visible item 5

Always visible item 6

Always visible item 7

Always visible item 8

Always visible item 9

Always visible item 10

On hover:

Hover to see scrollbar 1

Hover to see scrollbar 2

Hover to see scrollbar 3

Hover to see scrollbar 4

Hover to see scrollbar 5

Hover to see scrollbar 6

Hover to see scrollbar 7

Hover to see scrollbar 8

Hover to see scrollbar 9

Hover to see scrollbar 10

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
// Always visible
DScrollArea(
  scrollbarVisibility: DScrollbarVisibility.always,
  maxHeight: '120px',
  children: [...],
)

// On hover
DScrollArea(
  scrollbarVisibility: DScrollbarVisibility.hover,
  maxHeight: '120px',
  children: [...],
)

Both Directions

This content is 600px x 400px

Scroll both horizontally and vertically to see all content.

dart
1
2
3
4
5
6
7
8
DScrollArea(
  orientation: DScrollOrientation.both,
  maxHeight: '200px',
  maxWidth: '400px',
  children: [
    div(classes: 'w-[600px] h-[400px]', [...]),
  ],
)