Scroll Area
Consistent scroll area across platforms.
<script lang="ts">
import { ScrollArea } from "bits-ui";
</script>
<div
class="max-w-[250px] rounded-[10px] border border-dark-10 bg-background-alt px-2 py-4 shadow-card"
>
<ScrollArea.Root class="relative h-[205px] px-4">
<ScrollArea.Viewport class="h-full w-full">
<ScrollArea.Content>
<h4
class="mb-4 mt-2 text-[20px] font-semibold leading-none tracking-[-0.01em] text-foreground"
>
Scroll Area
</h4>
<p class="text-sm leading-5 text-foreground-alt">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos
impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque
aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum
accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic
quae corrupti autem? Dolorem, sit voluptatum.
</p>
</ScrollArea.Content>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
orientation="vertical"
class="flex h-full w-2.5 touch-none select-none rounded-full border-l border-l-transparent p-px transition-all hover:w-3 hover:bg-dark-10"
>
<ScrollArea.Thumb
class="relative flex-1 rounded-full bg-muted-foreground opacity-40 transition-opacity hover:opacity-100"
/>
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
</div>
Structure
<script lang="ts">
import { ScrollArea } from "bits-ui";
</script>
<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content>
<!-- ... -->
</ScrollArea.Content>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Scrollbar orientation="horizontal">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
API Reference
The container of all scroll area components. Overflow is hidden on this element to prevent double scrollbars.
| Property | Type | Description |
|---|---|---|
type | enum | The type of scroll area. Default:
undefined |
hideDelay | number | The delay in milliseconds before the scroll area hides itself when using Default:
600 |
dir | enum | The reading direction of the scroll area. Default:
undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-scroll-area-root | —— | Present on the root element. |
The component which wraps the content and is responsible for computing the scroll area size.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-scroll-area-viewport | —— | Present on the viewport element. |
The scrollable content of the scroll area.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-scroll-area-content | —— | Present on the content element. |
A scrollbar of the scroll area.
| Property | Type | Description |
|---|---|---|
orientation * Required | enum | The orientation of the scrollbar. Default:
undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The visibility state of the scrollbar |
data-scroll-area-scrollbar-x | —— | Present on |
data-scroll-area-scrollbar-y | —— | Present on the |
A thumb of a scrollbar in the scroll area.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The visibility state of the scrollbar |
data-scroll-area-thumb-x | —— | Present on |
data-scroll-area-thumb-y | —— | Present on the |
The corner element between the X and Y scrollbars.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-scroll-area-corner | —— | Present on the corner element. |