# Scroll Area

URL: https://ark-ui.com/docs/components/scroll-area
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/scroll-area.mdx

A custom scrollable area component with styled scrollbars.

---

<ComponentPreview id="ScrollArea" />

## Anatomy

<Anatomy id="scroll-area" />

```tsx
<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content />
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>
```

## Required style

It's important to note that the scroll area requires the following styles on the `ScrollArea.Viewport` element to hide
the native scrollbar:

```css
[data-scope='scroll-area'][data-part='viewport'] {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
```

## Examples

### Basic

Create a basic scrollable area with custom scrollbar.

**Example: basic**

#### React

```tsx
import { ScrollArea } from '@ark-ui/react/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Basic = () => (
  <ScrollArea.Root className={styles.Root}>
    <ScrollArea.Viewport className={styles.Viewport}>
      <ScrollArea.Content className={styles.Content}>
        <p className={styles.Paragraph}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
          explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
          magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
          dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
          dolore magnam aliquam quaerat voluptatem.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar className={styles.Scrollbar}>
      <ScrollArea.Thumb className={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner className={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Solid

```tsx
import { ScrollArea } from '@ark-ui/solid/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Basic = () => (
  <ScrollArea.Root class={styles.Root}>
    <ScrollArea.Viewport class={styles.Viewport}>
      <ScrollArea.Content class={styles.Content}>
        <p class={styles.Paragraph}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
          explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
          magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
          dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
          dolore magnam aliquam quaerat voluptatem.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar class={styles.Scrollbar}>
      <ScrollArea.Thumb class={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner class={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { ScrollArea } from '@ark-ui/vue/scroll-area'
import styles from 'styles/scroll-area.module.css'
</script>

<template>
  <ScrollArea.Root :class="styles.Root">
    <ScrollArea.Viewport :class="styles.Viewport">
      <ScrollArea.Content :class="styles.Content">
        <p :class="styles.Paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
          explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
          magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
          dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
          dolore magnam aliquam quaerat voluptatem.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar :class="styles.Scrollbar">
      <ScrollArea.Thumb :class="styles.Thumb" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner :class="styles.Corner" />
  </ScrollArea.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ScrollArea } from '@ark-ui/svelte/scroll-area'
  import styles from 'styles/scroll-area.module.css'
</script>

<ScrollArea.Root class={styles.Root}>
  <ScrollArea.Viewport class={styles.Viewport}>
    <ScrollArea.Content class={styles.Content}>
      <p class={styles.Paragraph}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
        rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
        eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem.
      </p>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar class={styles.Scrollbar}>
    <ScrollArea.Thumb class={styles.Thumb} />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner class={styles.Corner} />
</ScrollArea.Root>

```

### Horizontal

Configure the scroll area for horizontal scrolling only.

**Example: horizontal**

#### React

```tsx
import { ScrollArea } from '@ark-ui/react/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Horizontal = () => (
  <ScrollArea.Root className={styles.Root} style={{ height: 'auto' }}>
    <ScrollArea.Viewport className={styles.Viewport}>
      <ScrollArea.Content className={styles.Content}>
        <p className={styles.Paragraph} style={{ width: '50vw' }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="horizontal" className={styles.Scrollbar}>
      <ScrollArea.Thumb className={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner className={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Solid

```tsx
import { ScrollArea } from '@ark-ui/solid/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Horizontal = () => (
  <ScrollArea.Root class={styles.Root} style={{ height: 'auto' }}>
    <ScrollArea.Viewport class={styles.Viewport}>
      <ScrollArea.Content class={styles.Content}>
        <p class={styles.Paragraph} style={{ width: '50vw' }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="horizontal" class={styles.Scrollbar}>
      <ScrollArea.Thumb class={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner class={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { ScrollArea } from '@ark-ui/vue/scroll-area'
import styles from 'styles/scroll-area.module.css'
</script>

<template>
  <ScrollArea.Root :class="styles.Root" :style="{ height: 'auto' }">
    <ScrollArea.Viewport :class="styles.Viewport">
      <ScrollArea.Content :class="styles.Content">
        <p :class="styles.Paragraph" :style="{ width: '50vw' }">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="horizontal" :class="styles.Scrollbar">
      <ScrollArea.Thumb :class="styles.Thumb" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner :class="styles.Corner" />
  </ScrollArea.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ScrollArea } from '@ark-ui/svelte/scroll-area'
  import styles from 'styles/scroll-area.module.css'
</script>

<ScrollArea.Root class={styles.Root} style="height: auto;">
  <ScrollArea.Viewport class={styles.Viewport}>
    <ScrollArea.Content class={styles.Content}>
      <p class={styles.Paragraph} style="width: 50vw;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="horizontal" class={styles.Scrollbar}>
    <ScrollArea.Thumb class={styles.Thumb} />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner class={styles.Corner} />
</ScrollArea.Root>

```

### Both Directions

Enable scrolling in both horizontal and vertical directions.

**Example: both-directions**

#### React

```tsx
import { ScrollArea } from '@ark-ui/react/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const BothDirections = () => (
  <ScrollArea.Root className={styles.Root} style={{ height: '12rem' }}>
    <ScrollArea.Viewport className={styles.Viewport}>
      <ScrollArea.Content className={styles.Content}>
        <p className={styles.Paragraph} style={{ width: '50vw' }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
        <p className={styles.Paragraph} style={{ width: '50vw' }}>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
          dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <p className={styles.Paragraph} style={{ width: '50vw' }}>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
          atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
          sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" className={styles.Scrollbar}>
      <ScrollArea.Thumb className={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" className={styles.Scrollbar}>
      <ScrollArea.Thumb className={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner className={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Solid

```tsx
import { ScrollArea } from '@ark-ui/solid/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const BothDirections = () => (
  <ScrollArea.Root class={styles.Root} style={{ height: '12rem' }}>
    <ScrollArea.Viewport class={styles.Viewport}>
      <ScrollArea.Content class={styles.Content}>
        <p class={styles.Paragraph} style={{ width: '50vw' }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
        <p class={styles.Paragraph} style={{ width: '50vw' }}>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
          dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <p class={styles.Paragraph} style={{ width: '50vw' }}>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
          atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
          sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
      <ScrollArea.Thumb class={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" class={styles.Scrollbar}>
      <ScrollArea.Thumb class={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner class={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { ScrollArea } from '@ark-ui/vue/scroll-area'
import styles from 'styles/scroll-area.module.css'
</script>

<template>
  <ScrollArea.Root :class="styles.Root" :style="{ height: '12rem' }">
    <ScrollArea.Viewport :class="styles.Viewport">
      <ScrollArea.Content :class="styles.Content">
        <p :class="styles.Paragraph" :style="{ width: '50vw' }">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        </p>
        <p :class="styles.Paragraph" :style="{ width: '50vw' }">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
          dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <p :class="styles.Paragraph" :style="{ width: '50vw' }">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
          atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
          sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
        </p>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" :class="styles.Scrollbar">
      <ScrollArea.Thumb :class="styles.Thumb" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" :class="styles.Scrollbar">
      <ScrollArea.Thumb :class="styles.Thumb" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner :class="styles.Corner" />
  </ScrollArea.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ScrollArea } from '@ark-ui/svelte/scroll-area'
  import styles from 'styles/scroll-area.module.css'
</script>

<ScrollArea.Root class={styles.Root} style="height: 12rem;">
  <ScrollArea.Viewport class={styles.Viewport}>
    <ScrollArea.Content class={styles.Content}>
      <p class={styles.Paragraph} style="width: 50vw;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
      <p class={styles.Paragraph} style="width: 50vw;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt.
      </p>
      <p class={styles.Paragraph} style="width: 50vw;">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
        corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
      </p>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
    <ScrollArea.Thumb class={styles.Thumb} />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal" class={styles.Scrollbar}>
    <ScrollArea.Thumb class={styles.Thumb} />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner class={styles.Corner} />
</ScrollArea.Root>

```

### Nested

Scroll areas can be nested within each other for complex layouts.

**Example: nested**

#### React

```tsx
import { ScrollArea } from '@ark-ui/react/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Nested = () => (
  <ScrollArea.Root className={styles.Root} style={{ height: '12rem' }}>
    <ScrollArea.Viewport className={styles.Viewport}>
      <ScrollArea.Content className={styles.Content}>
        <p className={styles.Paragraph}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
        <ScrollArea.Root className={styles.Root} style={{ height: '8rem', width: '100%' }}>
          <ScrollArea.Viewport className={styles.Viewport}>
            <ScrollArea.Content className={styles.Content}>
              <p className={styles.Paragraph}>
                This is a nested scroll area. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                veritatis et quasi architecto beatae vitae dicta sunt explicabo.
              </p>
            </ScrollArea.Content>
          </ScrollArea.Viewport>
          <ScrollArea.Scrollbar orientation="vertical" className={styles.Scrollbar}>
            <ScrollArea.Thumb className={styles.Thumb} />
          </ScrollArea.Scrollbar>
          <ScrollArea.Corner className={styles.Corner} />
        </ScrollArea.Root>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" className={styles.Scrollbar}>
      <ScrollArea.Thumb className={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner className={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Solid

```tsx
import { ScrollArea } from '@ark-ui/solid/scroll-area'
import styles from 'styles/scroll-area.module.css'

export const Nested = () => (
  <ScrollArea.Root class={styles.Root} style={{ height: '12rem' }}>
    <ScrollArea.Viewport class={styles.Viewport}>
      <ScrollArea.Content class={styles.Content}>
        <p class={styles.Paragraph}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
        <ScrollArea.Root class={styles.Root} style={{ height: '8rem', width: '100%' }}>
          <ScrollArea.Viewport class={styles.Viewport}>
            <ScrollArea.Content class={styles.Content}>
              <p class={styles.Paragraph}>
                This is a nested scroll area. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                veritatis et quasi architecto beatae vitae dicta sunt explicabo.
              </p>
            </ScrollArea.Content>
          </ScrollArea.Viewport>
          <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
            <ScrollArea.Thumb class={styles.Thumb} />
          </ScrollArea.Scrollbar>
          <ScrollArea.Corner class={styles.Corner} />
        </ScrollArea.Root>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
      <ScrollArea.Thumb class={styles.Thumb} />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner class={styles.Corner} />
  </ScrollArea.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { ScrollArea } from '@ark-ui/vue/scroll-area'
import styles from 'styles/scroll-area.module.css'
</script>

<template>
  <ScrollArea.Root :class="styles.Root" :style="{ height: '12rem' }">
    <ScrollArea.Viewport :class="styles.Viewport">
      <ScrollArea.Content :class="styles.Content">
        <p :class="styles.Paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
        <ScrollArea.Root :class="styles.Root" :style="{ height: '8rem', width: '100%' }">
          <ScrollArea.Viewport :class="styles.Viewport">
            <ScrollArea.Content :class="styles.Content">
              <p :class="styles.Paragraph">
                This is a nested scroll area. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                veritatis et quasi architecto beatae vitae dicta sunt explicabo.
              </p>
            </ScrollArea.Content>
          </ScrollArea.Viewport>
          <ScrollArea.Scrollbar orientation="vertical" :class="styles.Scrollbar">
            <ScrollArea.Thumb :class="styles.Thumb" />
          </ScrollArea.Scrollbar>
          <ScrollArea.Corner :class="styles.Corner" />
        </ScrollArea.Root>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" :class="styles.Scrollbar">
      <ScrollArea.Thumb :class="styles.Thumb" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner :class="styles.Corner" />
  </ScrollArea.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ScrollArea } from '@ark-ui/svelte/scroll-area'
  import styles from 'styles/scroll-area.module.css'
</script>

<ScrollArea.Root class={styles.Root} style="height: 12rem;">
  <ScrollArea.Viewport class={styles.Viewport}>
    <ScrollArea.Content class={styles.Content}>
      <p class={styles.Paragraph}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <ScrollArea.Root class={styles.Root} style="height: 8rem; width: 100%;">
        <ScrollArea.Viewport class={styles.Viewport}>
          <ScrollArea.Content class={styles.Content}>
            <p class={styles.Paragraph}>
              This is a nested scroll area. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
              deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
              architecto beatae vitae dicta sunt explicabo.
            </p>
          </ScrollArea.Content>
        </ScrollArea.Viewport>
        <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
          <ScrollArea.Thumb class={styles.Thumb} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Corner class={styles.Corner} />
      </ScrollArea.Root>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical" class={styles.Scrollbar}>
    <ScrollArea.Thumb class={styles.Thumb} />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner class={styles.Corner} />
</ScrollArea.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ids` | `Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` | No | The ids of the scroll area elements |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | root |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--corner-width` | The width of the Root |
| `--corner-height` | The height of the Root |
| `--thumb-width` | The width of the slider thumb |
| `--thumb-height` | The height of the slider thumb |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | content |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Corner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Corner Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | corner |
| `[data-hover]` | Present when hovered |
| `[data-state]` | "hidden" | "visible" |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseScrollAreaReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Scrollbar Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**Scrollbar Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | scrollbar |
| `[data-orientation]` | The orientation of the scrollbar |
| `[data-scrolling]` | Present when scrolling |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | thumb |
| `[data-orientation]` | The orientation of the thumb |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | viewport |
| `[data-at-top]` | Present when scrolled to the top edge |
| `[data-at-bottom]` | Present when scrolled to the bottom edge |
| `[data-at-left]` | Present when scrolled to the left edge |
| `[data-at-right]` | Present when scrolled to the right edge |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` | No | The ids of the scroll area elements |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | root |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--corner-width` | The width of the Root |
| `--corner-height` | The height of the Root |
| `--thumb-width` | The width of the slider thumb |
| `--thumb-height` | The height of the slider thumb |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | content |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Corner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Corner Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | corner |
| `[data-hover]` | Present when hovered |
| `[data-state]` | "hidden" | "visible" |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseScrollAreaContext` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Scrollbar Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**Scrollbar Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | scrollbar |
| `[data-orientation]` | The orientation of the scrollbar |
| `[data-scrolling]` | Present when scrolling |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | thumb |
| `[data-orientation]` | The orientation of the thumb |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | viewport |
| `[data-at-top]` | Present when scrolled to the top edge |
| `[data-at-bottom]` | Present when scrolled to the bottom edge |
| `[data-at-left]` | Present when scrolled to the left edge |
| `[data-at-right]` | Present when scrolled to the right edge |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` | No | The ids of the scroll area elements |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | root |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--corner-width` | The width of the Root |
| `--corner-height` | The height of the Root |
| `--thumb-width` | The width of the slider thumb |
| `--thumb-height` | The height of the slider thumb |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | content |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Corner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Corner Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | corner |
| `[data-hover]` | Present when hovered |
| `[data-state]` | "hidden" | "visible" |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ScrollAreaApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Scrollbar Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**Scrollbar Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | scrollbar |
| `[data-orientation]` | The orientation of the scrollbar |
| `[data-scrolling]` | Present when scrolling |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | thumb |
| `[data-orientation]` | The orientation of the thumb |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | viewport |
| `[data-at-top]` | Present when scrolled to the top edge |
| `[data-at-bottom]` | Present when scrolled to the bottom edge |
| `[data-at-left]` | Present when scrolled to the left edge |
| `[data-at-right]` | Present when scrolled to the right edge |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` | No | The ids of the scroll area elements |
| `ref` | `Element` | No |  |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | root |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--corner-width` | The width of the Root |
| `--corner-height` | The height of the Root |
| `--thumb-width` | The width of the slider thumb |
| `--thumb-height` | The height of the slider thumb |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | content |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseScrollAreaContext]>` | Yes |  |


**Corner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Corner Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | corner |
| `[data-hover]` | Present when hovered |
| `[data-state]` | "hidden" | "visible" |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseScrollAreaContext` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Scrollbar Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |
| `ref` | `Element` | No |  |


**Scrollbar Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | scrollbar |
| `[data-orientation]` | The orientation of the scrollbar |
| `[data-scrolling]` | Present when scrolling |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | thumb |
| `[data-orientation]` | The orientation of the thumb |
| `[data-hover]` | Present when hovered |
| `[data-dragging]` | Present when in the dragging state |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | scroll-area |
| `[data-part]` | viewport |
| `[data-at-top]` | Present when scrolled to the top edge |
| `[data-at-bottom]` | Present when scrolled to the bottom edge |
| `[data-at-left]` | Present when scrolled to the left edge |
| `[data-at-right]` | Present when scrolled to the right edge |
| `[data-overflow-x]` | Present when the content overflows the x-axis |
| `[data-overflow-y]` | Present when the content overflows the y-axis |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `isAtTop` | `boolean` | Whether the scroll area is at the top |
| `isAtBottom` | `boolean` | Whether the scroll area is at the bottom |
| `isAtLeft` | `boolean` | Whether the scroll area is at the left |
| `isAtRight` | `boolean` | Whether the scroll area is at the right |
| `hasOverflowX` | `boolean` | Whether the scroll area has horizontal overflow |
| `hasOverflowY` | `boolean` | Whether the scroll area has vertical overflow |
| `getScrollProgress` | `() => Point` | Get the scroll progress as values between 0 and 1 |
| `scrollToEdge` | `(details: ScrollToEdgeDetails) => void` | Scroll to the edge of the scroll area |
| `scrollTo` | `(details: ScrollToDetails) => void` | Scroll to specific coordinates |
| `getScrollbarState` | `(props: ScrollbarProps) => ScrollbarState` | Returns the state of the scrollbar |