# Scroll Area Documentation Provides a consistent scroll area across platforms. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte

Scroll Area

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.

``` ## Structure ```svelte ``` ## Reusable Components If you're planning to use the Scroll Area throughout your application, it's recommended to create a reusable component to reduce the amount of code you need to write each time. This example shows you how to create a Scroll Area component that accepts a few custom props that make it more capable. MyScrollArea.svelte ```svelte {#snippet Scrollbar({ orientation, }: { orientation: "vertical" | "horizontal"; })} {/snippet} {@render children?.()} {#if orientation === "vertical" || orientation === "both"} {@render Scrollbar({ orientation: "vertical" })} {/if} {#if orientation === "horizontal" || orientation === "both"} {@render Scrollbar({ orientation: "horizontal" })} {/if} ``` We'll use this custom component in the following examples to demonstrate how to customize the behavior of the Scroll Area. ## Scroll Area Types ### Hover The `hover` type is the default type of the scroll area, demonstrated in the featured example above. It only shows scrollbars when the user hovers over the scroll area and the content is larger than the viewport. ```svelte ``` ### Scroll The `scroll` type displays the scrollbars when the user scrolls the content. This is similar to the behavior of MacOS. ```svelte ``` ### Auto The `auto` type behaves similarly to your typical browser scrollbars. When the content is larger than the viewport, the scrollbars will appear and remain visible at all times. ```svelte ``` ### Always The `always` type behaves as if you set `overflow: scroll` on the scroll area. Scrollbars will always be visible, even when the content is smaller than the viewport. We've also set the `orientation` prop on the `MyScrollArea` to `'both'` to ensure both scrollbars are rendered. ```svelte ``` ## Customizing the Hide Delay You can customize the hide delay of the scrollbars using the `scrollHideDelay` prop. ```svelte ``` ## API Reference ### ScrollArea.Root The container of all scroll area components. Overflow is hidden on this element to prevent double scrollbars. | Property | Type | Description | Details | | ----------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `type` | `enum` - 'hover' \| 'scroll' \| 'auto' \| 'always' | The type of scroll area.`Default: 'hover'` | | | `scrollHideDelay` | `number` | The delay in milliseconds before the scroll area hides itself when using `'hover'` or `'scroll'` type.`Default: 600` | | | `dir` | `enum` - 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ----------------------- | ----- | ---------------------------- | ------- | | `data-scroll-area-root` | `''` | Present on the root element. | | ### ScrollArea.Viewport The component which wraps the content and is responsible for computing the scroll area size. | Property | Type | Description | Details | | --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | --------------------------- | ----- | -------------------------------- | ------- | | `data-scroll-area-viewport` | `''` | Present on the viewport element. | | ### ScrollArea.Scrollbar A scrollbar of the scroll area. | Property | Type | Description | Details | | ---------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `orientation` required | `enum` - 'horizontal' \| 'vertical' | The orientation of the scrollbar.`Default: —— undefined` | | | `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------------------ | ------------------------------ | ------------------------------------------------ | ------- | | `data-state` | `enum` - 'visible' \| 'hidden' | The visibility state of the scrollbar | | | `data-scroll-area-scrollbar-x` | `''` | Present on the `'horizontal'` scrollbar element. | | | `data-scroll-area-scrollbar-y` | `''` | Present on the `'vertical'` scrollbar element. | | ### ScrollArea.Thumb A thumb of a scrollbar in the scroll area. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | -------------------------- | ------------------------------ | -------------------------------------------- | ------- | | `data-state` | `enum` - 'visible' \| 'hidden' | The visibility state of the scrollbar | | | `data-scroll-area-thumb-x` | `''` | Present on the `'horizontal'` thumb element. | | | `data-scroll-area-thumb-y` | `''` | Present on the `'vertical'` thumb element. | | ### ScrollArea.Corner The corner element between the X and Y scrollbars. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------------- | ----- | ------------------------------ | ------- | | `data-scroll-area-corner` | `''` | Present on the corner element. | | [Previous Rating Group](/docs/components/rating-group) [Next Select](/docs/components/select)