ScrollArea
ScrollArea is a container with custom styled thin scrollbars — pure CSS, no JavaScript tracking required.
Vertical scroll
Line 1 — scrollable content here
Line 2 — scrollable content here
Line 3 — scrollable content here
Line 4 — scrollable content here
Line 5 — scrollable content here
Line 6 — scrollable content here
Line 7 — scrollable content here
Line 8 — scrollable content here
Line 9 — scrollable content here
Line 10 — scrollable content here
Line 11 — scrollable content here
Line 12 — scrollable content here
Line 13 — scrollable content here
Line 14 — scrollable content here
Line 15 — scrollable content here
Line 16 — scrollable content here
Line 17 — scrollable content here
Line 18 — scrollable content here
Line 19 — scrollable content here
Line 20 — scrollable content here
<ScrollArea height="200px">
<p v-for="i in 20" :key="i">Line {{ i }}</p>
</ScrollArea>Horizontal scroll
<ScrollArea orientation="horizontal">
<div style="display:flex;gap:12px;width:max-content">
<!-- wide content -->
</div>
</ScrollArea>Both axes
Row 1 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 2 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 3 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 4 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 5 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 6 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 7 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 8 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 9 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 10 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 11 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 12 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 13 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 14 — This is a very long line of text that forces horizontal scrolling as well as vertical
Row 15 — This is a very long line of text that forces horizontal scrolling as well as vertical
<ScrollArea orientation="both" height="180px">
<!-- wide + tall content -->
</ScrollArea>Props
| Prop | Type | Default | Description |
|---|---|---|---|
height | string | — | CSS height value e.g. '400px' |
maxHeight | string | — | CSS max-height value |
width | string | — | CSS width value |
orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Scroll direction(s) |
Slots
| Slot | Description |
|---|---|
| default | Scrollable content |