Components

ScrollArea

A scrollable container that provides custom scrollbars and enhanced scrolling experience.

Component

View code

Show playground

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

Props	Default	Type
`scrollOrientation`	`ScrollOrientation.VERTICAL`	`ScrollOrientation`
`maxHeight`	`300`	`number`
`hasBorder`	—	`boolean`

The scrollOrientation prop determines the orientation of the scroll area. It accepts values from the ScrollOrientation enum.

 <template>
    <ScrollArea 
        :scrollOrientation="ScrollOrientation.VERTICAL"  
    />
</template>

Value	Description
`VERTICAL`	Vertical scroll orientation
`HORIZONTAL`	Horizontal scroll orientation
`BOTH`	Both axes scroll orientation

The maxHeight prop sets the maximum height of the scroll area in pixels. If the content exceeds this height, a scrollbar will appear.

 <template>
    <ScrollArea 
        :maxHeight="400"  
    />
</template>

The hasBorder prop determines whether the scroll area should have a border. When set to true, a border will be applied around the scroll area.

 <template>
    <ScrollArea 
        hasBorder  
    />
</template>