Skip to content
UI

Scroll Area

A custom scrollable area with styled scrollbars.

 
<script setup lang="ts">
import { ScrollArea } from '@destyler-ui/vue'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
</script>

<template>
  <main>
    <ScrollArea.Root style="width: 200px; height: 300px; border: 1px solid #ccc;">
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style="padding: 16px;">
            <h3 style="margin: 0 0 12px 0;">Tags</h3>
            <div v-for="tag in tags" :key="tag" style="padding: 8px 0; border-bottom: 1px solid #eee;">
              {{ tag }}
            </div>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style="background: #f0f0f0;" />
    </ScrollArea.Root>
  </main>
</template>

import { ScrollArea } from '@destyler-ui/react'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)

export function Basic() {
  return (
    <ScrollArea.Root style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}>
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style={{ padding: '16px' }}>
            <h3 style={{ margin: '0 0 12px 0' }}>Tags</h3>
            {tags.map(tag => (
              <div key={tag} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
                {tag}
              </div>
            ))}
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style={{ width: '8px', background: '#f0f0f0' }}>
        <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style={{ height: '8px', background: '#f0f0f0' }}>
        <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
    </ScrollArea.Root>
  )
}

import { For } from 'solid-js'
import { ScrollArea } from '@destyler-ui/solid'

const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`)

export function Basic() {
  return (
    <ScrollArea.Root style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}>
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style={{ padding: '16px' }}>
            <h3 style={{ margin: '0 0 12px 0' }}>Tags</h3>
            <For each={tags}>
              {tag => (
                <div style={{ 'padding': '8px 0', 'border-bottom': '1px solid #eee' }}>
                  {tag}
                </div>
              )}
            </For>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar
        orientation="vertical"
        style={{ width: '8px', background: '#f0f0f0' }}
      >
        <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar
        orientation="horizontal"
        style={{ height: '8px', background: '#f0f0f0' }}
      >
        <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
    </ScrollArea.Root>
  )
}

<script lang="ts">
  import { ScrollArea } from '@destyler-ui/svelte'

  const tags = Array.from({ length: 50 }, (_, i) => `v1.2.0-beta.${50 - i}`)
</script>

<main>
  <ScrollArea.Root style="width: 200px; height: 300px; border: 1px solid #ccc;">
    <ScrollArea.Viewport>
      <ScrollArea.Content>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 12px 0;">Tags</h3>
          {#each tags as tag (tag)}
            <div style="padding: 8px 0; border-bottom: 1px solid #eee;">{tag}</div>
          {/each}
        </div>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner style="background: #f0f0f0;" />
  </ScrollArea.Root>
</main>

Anatomy

Section titled “Anatomy”
<script setup lang="ts">
import { ScrollArea } from '@destyler-ui/vue'
</script>


<template>
  <ScrollArea.Root>
    <ScrollArea.Viewport>
      <ScrollArea.Content />
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar>
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
</template>
import { ScrollArea } from '@destyler-ui/react'


export default function Basic() {
  return (
    <ScrollArea.Root>
      <ScrollArea.Viewport>
        <ScrollArea.Content />
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar>
        <ScrollArea.Thumb />
      </ScrollArea.Scrollbar>
      <ScrollArea.Corner />
    </ScrollArea.Root>
  )
}
import { ScrollArea } from '@destyler-ui/solid'


export default function Basic() {
  return (
    <ScrollArea.Root>
      <ScrollArea.Viewport>
        <ScrollArea.Content />
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar>
        <ScrollArea.Thumb />
      </ScrollArea.Scrollbar>
      <ScrollArea.Corner />
    </ScrollArea.Root>
  )
}
<script lang="ts">
  import { ScrollArea } from '@destyler-ui/svelte'


  const items = Array.from({ length: 50 }, (_, index) => 'Item ' + (index + 1))
</script>


<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content>
      {#each items as item (item)}
        <div>{item}</div>
      {/each}
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Examples

Section titled “Examples”

Basic

Section titled “Basic”
 
<script setup lang="ts">
import { ScrollArea } from '@destyler-ui/vue'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
</script>

<template>
  <main>
    <ScrollArea.Root style="width: 200px; height: 300px; border: 1px solid #ccc;">
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style="padding: 16px;">
            <h3 style="margin: 0 0 12px 0;">Tags</h3>
            <div v-for="tag in tags" :key="tag" style="padding: 8px 0; border-bottom: 1px solid #eee;">
              {{ tag }}
            </div>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style="background: #f0f0f0;" />
    </ScrollArea.Root>
  </main>
</template>

import { ScrollArea } from '@destyler-ui/react'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)

export function Basic() {
  return (
    <ScrollArea.Root style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}>
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style={{ padding: '16px' }}>
            <h3 style={{ margin: '0 0 12px 0' }}>Tags</h3>
            {tags.map(tag => (
              <div key={tag} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
                {tag}
              </div>
            ))}
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style={{ width: '8px', background: '#f0f0f0' }}>
        <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style={{ height: '8px', background: '#f0f0f0' }}>
        <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
    </ScrollArea.Root>
  )
}

import { For } from 'solid-js'
import { ScrollArea } from '@destyler-ui/solid'

const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`)

export function Basic() {
  return (
    <ScrollArea.Root style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}>
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style={{ padding: '16px' }}>
            <h3 style={{ margin: '0 0 12px 0' }}>Tags</h3>
            <For each={tags}>
              {tag => (
                <div style={{ 'padding': '8px 0', 'border-bottom': '1px solid #eee' }}>
                  {tag}
                </div>
              )}
            </For>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar
        orientation="vertical"
        style={{ width: '8px', background: '#f0f0f0' }}
      >
        <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar
        orientation="horizontal"
        style={{ height: '8px', background: '#f0f0f0' }}
      >
        <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
    </ScrollArea.Root>
  )
}

<script lang="ts">
  import { ScrollArea } from '@destyler-ui/svelte'

  const tags = Array.from({ length: 50 }, (_, i) => `v1.2.0-beta.${50 - i}`)
</script>

<main>
  <ScrollArea.Root style="width: 200px; height: 300px; border: 1px solid #ccc;">
    <ScrollArea.Viewport>
      <ScrollArea.Content>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 12px 0;">Tags</h3>
          {#each tags as tag (tag)}
            <div style="padding: 8px 0; border-bottom: 1px solid #eee;">{tag}</div>
          {/each}
        </div>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner style="background: #f0f0f0;" />
  </ScrollArea.Root>
</main>

Controlled

Section titled “Controlled”

Control the scroll position programmatically.

 
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ScrollArea, useScrollArea } from '@destyler-ui/vue'

const scrollTop = ref(0)
const scrollArea = useScrollArea({ id: 'controlled-scroll-area' })

watch(() => scrollArea.value.scrollTop, (value) => {
  scrollTop.value = value
})

const scrollToTop = () => {
  scrollArea.value.scrollTo({ top: 0 })
}

const scrollToBottom = () => {
  scrollArea.value.scrollTo({ top: 9999 })
}

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
</script>

<template>
  <main style="display: flex; flex-direction: column; gap: 16px;">
    <div style="display: flex; gap: 8px; align-items: center;">
      <button @click="scrollToTop" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Top
      </button>
      <button @click="scrollToBottom" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Bottom
      </button>
      <span>Scroll Position: {{ scrollTop.toFixed(0) }}px</span>
    </div>

    <ScrollArea.RootProvider
      :value="scrollArea"
      style="width: 200px; height: 300px; border: 1px solid #ccc;"
    >
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style="padding: 16px;">
            <h3 style="margin: 0 0 12px 0;">Tags (Controlled)</h3>
            <div v-for="tag in tags" :key="tag" style="padding: 8px 0; border-bottom: 1px solid #eee;">
              {{ tag }}
            </div>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style="background: #f0f0f0;" />
    </ScrollArea.RootProvider>
  </main>
</template>

import { useEffect, useState } from 'react'
import { ScrollArea, useScrollArea } from '@destyler-ui/react'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)

export function Controlled() {
  const [scrollTop, setScrollTop] = useState(0)
  const scrollArea = useScrollArea({ id: 'controlled-scroll-area' })

  useEffect(() => {
    setScrollTop(scrollArea.scrollTop)
  }, [scrollArea.scrollTop])

  const scrollToTop = () => {
    scrollArea.scrollTo({ top: 0 })
  }

  const scrollToBottom = () => {
    scrollArea.scrollTo({ top: 9999 })
  }

  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <button onClick={scrollToTop} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Top
        </button>
        <button onClick={scrollToBottom} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Bottom
        </button>
        <span>
          Scroll Position:
          {scrollTop.toFixed(0)}
          px
        </span>
      </div>

      <ScrollArea.RootProvider
        value={scrollArea}
        style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}
      >
        <ScrollArea.Viewport>
          <ScrollArea.Content>
            <div style={{ padding: '16px' }}>
              <h3 style={{ margin: '0 0 12px 0' }}>Tags (Controlled)</h3>
              {tags.map(tag => (
                <div key={tag} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
                  {tag}
                </div>
              ))}
            </div>
          </ScrollArea.Content>
        </ScrollArea.Viewport>

        <ScrollArea.Scrollbar orientation="vertical" style={{ width: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Scrollbar orientation="horizontal" style={{ height: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

import { createEffect, createSignal, For } from 'solid-js'
import { ScrollArea, useScrollArea } from '@destyler-ui/solid'

const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`)

export function Controlled() {
  const [scrollTop, setScrollTop] = createSignal(0)
  const scrollArea = useScrollArea({ id: 'controlled-scroll-area' })

  createEffect(() => {
    setScrollTop(scrollArea().scrollTop)
  })

  const scrollToTop = () => {
    scrollArea().scrollTo({ top: 0 })
  }

  const scrollToBottom = () => {
    scrollArea().scrollTo({ top: 9999 })
  }

  return (
    <main style={{ 'display': 'flex', 'flex-direction': 'column', 'gap': '16px' }}>
      <div style={{ 'display': 'flex', 'gap': '8px', 'align-items': 'center' }}>
        <button
          type="button"
          onClick={scrollToTop}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Top
        </button>
        <button
          type="button"
          onClick={scrollToBottom}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Bottom
        </button>
        <span>Scroll Position: {scrollTop().toFixed(0)}px</span>
      </div>

      <ScrollArea.RootProvider
        value={scrollArea}
        style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}
      >
        <ScrollArea.Viewport>
          <ScrollArea.Content>
            <div style={{ padding: '16px' }}>
              <h3 style={{ margin: '0 0 12px 0' }}>Tags (Controlled)</h3>
              <For each={tags}>
                {tag => (
                  <div style={{ 'padding': '8px 0', 'border-bottom': '1px solid #eee' }}>
                    {tag}
                  </div>
                )}
              </For>
            </div>
          </ScrollArea.Content>
        </ScrollArea.Viewport>

        <ScrollArea.Scrollbar
          orientation="vertical"
          style={{ width: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Scrollbar
          orientation="horizontal"
          style={{ height: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { ScrollArea, useScrollArea } from '@destyler-ui/svelte'

  const id = $props.id()
  const scrollArea = useScrollArea({ id })
  const scrollTop = $derived(scrollArea().scrollTop)
  const tags = Array.from({ length: 50 }, (_, i) => `v1.2.0-beta.${50 - i}`)
</script>

<main style="display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; gap: 8px; align-items: center;">
    <button onclick={() => scrollArea().scrollTo({ top: 0 })} style="padding: 8px 16px; cursor: pointer;">
      Scroll to Top
    </button>
    <button onclick={() => scrollArea().scrollTo({ top: 9999 })} style="padding: 8px 16px; cursor: pointer;">
      Scroll to Bottom
    </button>
    <span>Scroll Position: {scrollTop.toFixed(0)}px</span>
  </div>
  <ScrollArea.RootProvider value={scrollArea} style="width: 200px; height: 300px; border: 1px solid #ccc;">
    <ScrollArea.Viewport>
      <ScrollArea.Content>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 12px 0;">Tags (Controlled)</h3>
          {#each tags as tag (tag)}
            <div style="padding: 8px 0; border-bottom: 1px solid #eee;">{tag}</div>
          {/each}
        </div>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner style="background: #f0f0f0;" />
  </ScrollArea.RootProvider>
</main>

Virtual Scroll

Section titled “Virtual Scroll”

Use virtual scrolling for large lists.

 
<script setup lang="ts">
import { computed } from 'vue'
import { ScrollArea, useScrollArea } from '@destyler-ui/vue'

const itemCount = 10000
const itemSize = 40

const scrollArea = useScrollArea({
  virtual: {
    count: itemCount,
    itemSize,
    overscan: 5,
  },
})

const virtualItems = computed(() => scrollArea.value.getVirtualItems())
const totalSize = computed(() => scrollArea.value.getTotalSize())

const scrollToStart = () => {
  scrollArea.value.scrollToIndex(0)
}

const scrollToMiddle = () => {
  scrollArea.value.scrollToIndex(Math.floor(itemCount / 2))
}

const scrollToEnd = () => {
  scrollArea.value.scrollToIndex(itemCount - 1)
}
</script>

<template>
  <main style="display: flex; flex-direction: column; gap: 16px;">
    <p style="margin: 0;">Rendering {{ itemCount }} items efficiently with virtual scrolling (only {{ virtualItems.length }} DOM nodes)</p>

    <div style="display: flex; gap: 8px;">
      <button @click="scrollToStart" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Start
      </button>
      <button @click="scrollToMiddle" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Middle
      </button>
      <button @click="scrollToEnd" style="padding: 8px 16px; cursor: pointer;">
        Scroll to End
      </button>
    </div>

    <ScrollArea.RootProvider
      :value="scrollArea"
      style="width: 300px; height: 400px; border: 1px solid #ccc;"
    >
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div
            v-for="item in virtualItems"
            :key="item.index"
            :style="{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${itemSize}px`,
              transform: `translateY(${item.start}px)`,
              padding: '8px 16px',
              borderBottom: '1px solid #eee',
              display: 'flex',
              alignItems: 'center',
              boxSizing: 'border-box',
            }"
          >
            Item {{ item.index + 1 }}
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style="background: #f0f0f0;" />
    </ScrollArea.RootProvider>
  </main>
</template>

import { ScrollArea, useScrollArea } from '@destyler-ui/react'

const itemCount = 10000
const itemSize = 40

export function VirtualScroll() {
  const scrollArea = useScrollArea({
    virtual: {
      count: itemCount,
      itemSize,
      overscan: 5,
    },
  })

  const virtualItems = scrollArea.getVirtualItems()

  const scrollToStart = () => {
    scrollArea.scrollToIndex(0)
  }

  const scrollToMiddle = () => {
    scrollArea.scrollToIndex(Math.floor(itemCount / 2))
  }

  const scrollToEnd = () => {
    scrollArea.scrollToIndex(itemCount - 1)
  }

  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <p style={{ margin: 0 }}>
        Rendering
        {itemCount}
        {' '}
        items efficiently with virtual scrolling (only
        {virtualItems.length}
        {' '}
        DOM nodes)
      </p>

      <div style={{ display: 'flex', gap: '8px' }}>
        <button onClick={scrollToStart} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Start
        </button>
        <button onClick={scrollToMiddle} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Middle
        </button>
        <button onClick={scrollToEnd} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to End
        </button>
      </div>

      <ScrollArea.RootProvider
        value={scrollArea}
        style={{ width: '300px', height: '400px', border: '1px solid #ccc' }}
      >
        <ScrollArea.Viewport>
          <ScrollArea.Content>
            {virtualItems.map(item => (
              <div
                key={item.index}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: `${itemSize}px`,
                  transform: `translateY(${item.start}px)`,
                  padding: '8px 16px',
                  borderBottom: '1px solid #eee',
                  display: 'flex',
                  alignItems: 'center',
                  boxSizing: 'border-box',
                }}
              >
                Item
                {item.index + 1}
              </div>
            ))}
          </ScrollArea.Content>
        </ScrollArea.Viewport>

        <ScrollArea.Scrollbar orientation="vertical" style={{ width: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Scrollbar orientation="horizontal" style={{ height: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

import { For } from 'solid-js'
import { ScrollArea, useScrollArea } from '@destyler-ui/solid'

const itemCount = 10_000
const itemSize = 40

export function VirtualScroll() {
  const scrollArea = useScrollArea({
    virtual: { count: itemCount, itemSize, overscan: 5 },
  })

  return (
    <main style={{ 'display': 'flex', 'flex-direction': 'column', 'gap': '16px' }}>
      <p style={{ margin: '0' }}>
        Rendering {itemCount} items efficiently with virtual scrolling (only{' '}
        {scrollArea().getVirtualItems().length} DOM nodes)
      </p>
      <div style={{ display: 'flex', gap: '8px' }}>
        <button
          type="button"
          onClick={() => scrollArea().scrollToIndex(0)}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Start
        </button>
        <button
          type="button"
          onClick={() => scrollArea().scrollToIndex(Math.floor(itemCount / 2))}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Middle
        </button>
        <button
          type="button"
          onClick={() => scrollArea().scrollToIndex(itemCount - 1)}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to End
        </button>
      </div>

      <ScrollArea.RootProvider
        value={scrollArea}
        style={{ width: '300px', height: '400px', border: '1px solid #ccc' }}
      >
        <ScrollArea.Viewport>
          <ScrollArea.Content
            style={{ height: `${scrollArea().getTotalSize()}px`, position: 'relative' }}
          >
            <For each={scrollArea().getVirtualItems()}>
              {item => (
                <div
                  style={{
                    'position': 'absolute',
                    'top': '0',
                    'left': '0',
                    'width': '100%',
                    'height': `${itemSize}px`,
                    'transform': `translateY(${item.start}px)`,
                    'padding': '8px 16px',
                    'border-bottom': '1px solid #eee',
                    'display': 'flex',
                    'align-items': 'center',
                    'box-sizing': 'border-box',
                  }}
                >
                  Item {item.index + 1}
                </div>
              )}
            </For>
          </ScrollArea.Content>
        </ScrollArea.Viewport>
        <ScrollArea.Scrollbar
          orientation="vertical"
          style={{ width: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Scrollbar
          orientation="horizontal"
          style={{ height: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { ScrollArea, useScrollArea } from '@destyler-ui/svelte'

  const itemCount = 10_000
  const itemSize = 40
  const id = $props.id()
  const scrollArea = useScrollArea({
    id,
    virtual: { count: itemCount, itemSize, overscan: 5 },
  })
  const virtualItems = $derived(scrollArea().getVirtualItems())
  const totalSize = $derived(scrollArea().getTotalSize())
</script>

<main style="display: flex; flex-direction: column; gap: 16px;">
  <p style="margin: 0;">Rendering {itemCount} items efficiently with virtual scrolling (only {virtualItems.length} DOM nodes)</p>
  <div style="display: flex; gap: 8px;">
    <button onclick={() => scrollArea().scrollToIndex(0)} style="padding: 8px 16px; cursor: pointer;">
      Scroll to Start
    </button>
    <button
      onclick={() => scrollArea().scrollToIndex(Math.floor(itemCount / 2))}
      style="padding: 8px 16px; cursor: pointer;"
    >Scroll to Middle</button>
    <button onclick={() => scrollArea().scrollToIndex(itemCount - 1)} style="padding: 8px 16px; cursor: pointer;">
      Scroll to End
    </button>
  </div>
  <ScrollArea.RootProvider value={scrollArea} style="width: 300px; height: 400px; border: 1px solid #ccc;">
    <ScrollArea.Viewport>
      <ScrollArea.Content style={`height: ${totalSize}px; position: relative;`}>
        {#each virtualItems as item (item.index)}
          <div
            style={`position: absolute; top: 0; left: 0; width: 100%; height: ${itemSize}px; transform: translateY(${item.start}px); padding: 8px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center; box-sizing: border-box;`}
          >Item {item.index + 1}</div>
        {/each}
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner style="background: #f0f0f0;" />
  </ScrollArea.RootProvider>
</main>

Root Provider

Section titled “Root Provider”
 
<script setup lang="ts">
import { ScrollArea, useScrollArea } from '@destyler-ui/vue'

const scrollArea = useScrollArea()

const scrollToTop = () => {
  scrollArea.value.scrollTo({ top: 0 })
}

const scrollToBottom = () => {
  scrollArea.value.scrollTo({ top: 9999 })
}

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)
</script>

<template>
  <main style="display: flex; flex-direction: column; gap: 16px;">
    <div style="display: flex; gap: 8px;">
      <button @click="scrollToTop" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Top
      </button>
      <button @click="scrollToBottom" style="padding: 8px 16px; cursor: pointer;">
        Scroll to Bottom
      </button>
    </div>

    <ScrollArea.RootProvider :value="scrollArea" style="width: 200px; height: 300px; border: 1px solid #ccc;">
      <ScrollArea.Viewport>
        <ScrollArea.Content>
          <div style="padding: 16px;">
            <h3 style="margin: 0 0 12px 0;">Tags (Provider)</h3>
            <div v-for="tag in tags" :key="tag" style="padding: 8px 0; border-bottom: 1px solid #eee;">
              {{ tag }}
            </div>
          </div>
        </ScrollArea.Content>
      </ScrollArea.Viewport>

      <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb orientation="vertical" style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
        <ScrollArea.Thumb orientation="horizontal" style="background: #888; border-radius: 4px;" />
      </ScrollArea.Scrollbar>

      <ScrollArea.Corner style="background: #f0f0f0;" />
    </ScrollArea.RootProvider>
  </main>
</template>

import { ScrollArea, useScrollArea } from '@destyler-ui/react'

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
)

export function RootProvider() {
  const scrollArea = useScrollArea()

  const scrollToTop = () => {
    scrollArea.scrollTo({ top: 0 })
  }

  const scrollToBottom = () => {
    scrollArea.scrollTo({ top: 9999 })
  }

  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div style={{ display: 'flex', gap: '8px' }}>
        <button onClick={scrollToTop} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Top
        </button>
        <button onClick={scrollToBottom} style={{ padding: '8px 16px', cursor: 'pointer' }}>
          Scroll to Bottom
        </button>
      </div>

      <ScrollArea.RootProvider value={scrollArea} style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}>
        <ScrollArea.Viewport>
          <ScrollArea.Content>
            <div style={{ padding: '16px' }}>
              <h3 style={{ margin: '0 0 12px 0' }}>Tags (Provider)</h3>
              {tags.map(tag => (
                <div key={tag} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
                  {tag}
                </div>
              ))}
            </div>
          </ScrollArea.Content>
        </ScrollArea.Viewport>

        <ScrollArea.Scrollbar orientation="vertical" style={{ width: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb orientation="vertical" style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Scrollbar orientation="horizontal" style={{ height: '8px', background: '#f0f0f0' }}>
          <ScrollArea.Thumb orientation="horizontal" style={{ background: '#888', borderRadius: '4px' }} />
        </ScrollArea.Scrollbar>

        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

import { For } from 'solid-js'
import { ScrollArea, useScrollArea } from '@destyler-ui/solid'

const tags = Array.from({ length: 50 }, (_, index) => `v1.2.0-beta.${50 - index}`)

export function RootProvider() {
  const scrollArea = useScrollArea()

  return (
    <main style={{ 'display': 'flex', 'flex-direction': 'column', 'gap': '16px' }}>
      <div style={{ display: 'flex', gap: '8px' }}>
        <button
          type="button"
          onClick={() => scrollArea().scrollTo({ top: 0 })}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Top
        </button>
        <button
          type="button"
          onClick={() => scrollArea().scrollTo({ top: 9999 })}
          style={{ padding: '8px 16px', cursor: 'pointer' }}
        >
          Scroll to Bottom
        </button>
      </div>

      <ScrollArea.RootProvider
        value={scrollArea}
        style={{ width: '200px', height: '300px', border: '1px solid #ccc' }}
      >
        <ScrollArea.Viewport>
          <ScrollArea.Content>
            <div style={{ padding: '16px' }}>
              <h3 style={{ margin: '0 0 12px 0' }}>Tags (Provider)</h3>
              <For each={tags}>
                {tag => (
                  <div style={{ 'padding': '8px 0', 'border-bottom': '1px solid #eee' }}>
                    {tag}
                  </div>
                )}
              </For>
            </div>
          </ScrollArea.Content>
        </ScrollArea.Viewport>
        <ScrollArea.Scrollbar
          orientation="vertical"
          style={{ width: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Scrollbar
          orientation="horizontal"
          style={{ height: '8px', background: '#f0f0f0' }}
        >
          <ScrollArea.Thumb style={{ 'background': '#888', 'border-radius': '4px' }} />
        </ScrollArea.Scrollbar>
        <ScrollArea.Corner style={{ background: '#f0f0f0' }} />
      </ScrollArea.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { ScrollArea, useScrollArea } from '@destyler-ui/svelte'

  const id = $props.id()
  const scrollArea = useScrollArea({ id })
  const tags = Array.from({ length: 50 }, (_, i) => `v1.2.0-beta.${50 - i}`)
</script>

<main style="display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; gap: 8px;">
    <button onclick={() => scrollArea().scrollTo({ top: 0 })} style="padding: 8px 16px; cursor: pointer;">
      Scroll to Top
    </button>
    <button onclick={() => scrollArea().scrollTo({ top: 9999 })} style="padding: 8px 16px; cursor: pointer;">
      Scroll to Bottom
    </button>
  </div>
  <ScrollArea.RootProvider value={scrollArea} style="width: 200px; height: 300px; border: 1px solid #ccc;">
    <ScrollArea.Viewport>
      <ScrollArea.Content>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 12px 0;">Tags (Provider)</h3>
          {#each tags as tag (tag)}
            <div style="padding: 8px 0; border-bottom: 1px solid #eee;">{tag}</div>
          {/each}
        </div>
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical" style="width: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal" style="height: 8px; background: #f0f0f0;">
      <ScrollArea.Thumb style="background: #888; border-radius: 4px;" />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner style="background: #f0f0f0;" />
  </ScrollArea.RootProvider>
</main>

API Reference

Section titled “API Reference”

Root

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

dir—"ltr" | "rtl"

The text direction of the scroll area.

getRootNode—() => Node

Function that returns the root node. Useful for shadow DOM.

id—string

The unique identifier of the machine.

ids—Partial<{ root: string; viewport: string; content: string; scrollbarX: string; scrollbarY: string; thumbX: string; thumbY: string; corner: string; }>

The ids of the elements in the scroll area. Useful for composition.

scrollHideDelay600number

The time in milliseconds before the scrollbar hides after the user stops interacting.

type"hover""auto" | "always" | "scroll" | "hover"

The scroll behavior type. - "auto" - scrollbars are visible when content overflows - "always" - scrollbars are always visible - "scroll" - scrollbars are visible when scrolling - "hover" - scrollbars are visible when hovering

virtual—scrollArea.VirtualScrollOptions

Virtual scroll options for efficient rendering of large lists.

EmitEvent
scroll[details: ScrollChangeDetails]

Function called when the scroll position changes.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Corner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—MachineApi<PropTypes>
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Scrollbar

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation"vertical""horizontal" | "vertical"

The orientation of the scrollbar.

Thumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation"vertical""horizontal" | "vertical"

The orientation of the thumb.

Viewport

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

defaultScrollLeft—number

The initial scroll left position of the scroll area when it is first rendered. Use when you do not need to control the scroll position.

defaultScrollTop—number

The initial scroll position of the scroll area when it is first rendered. Use when you do not need to control the scroll position.

id—string

The unique identifier of the machine.

ids—Partial<{ root: string; viewport: string; content: string; scrollbarX: string; scrollbarY: string; thumbX: string; thumbY: string; corner: string; }>

The ids of the elements in the scroll area. Useful for composition.

onScroll—(details: ScrollChangeDetails) => void

Callback when scroll position changes

scrollHideDelay600number

If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.

type'hover'"auto" | "always" | "scroll" | "hover"

Describes the nature of scrollbar visibility - `auto`: Scrollbars are visible when content is overflowing - `always`: Scrollbars are always visible - `scroll`: Scrollbars are visible when the user is scrolling - `hover`: Scrollbars are visible when the user is hovering over the scroll area

virtual—scrollArea.VirtualScrollOptions

Virtual scroll configuration. When provided, enables virtual scrolling.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Corner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseScrollAreaReturn
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Scrollbar

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation"vertical""horizontal" | "vertical"

The orientation of the scrollbar.

Thumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation"vertical""horizontal" | "vertical"

The orientation of the thumb.

Viewport

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

defaultScrollLeft—number

Initial horizontal scroll position.

defaultScrollTop—number

Initial vertical scroll position.

id—string

The unique identifier of the machine.

ids—Partial<{ root: string; viewport: string; content: string; scrollbarX: string; scrollbarY: string; thumbX: string; thumbY: string; corner: string; }>

The ids of the elements in the scroll area. Useful for composition.

onScroll—(details: ScrollChangeDetails) => void

Callback when scroll position changes

scrollHideDelay600number

If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.

type'hover'"auto" | "always" | "scroll" | "hover"

Describes the nature of scrollbar visibility - `auto`: Scrollbars are visible when content is overflowing - `always`: Scrollbars are always visible - `scroll`: Scrollbars are visible when the user is scrolling - `hover`: Scrollbars are visible when the user is hovering over the scroll area

virtual—scrollArea.VirtualScrollOptions

Virtual scroll configuration. When provided, enables virtual scrolling.

Content

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Corner

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseScrollAreaReturn
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Scrollbar

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

orientation'vertical'"horizontal" | "vertical"

Thumb

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

Overrides the containing scrollbar orientation when provided.

Viewport

PropDefaultType
asChild—(props: (userProps?: solid_js376.JSX.HTMLAttributes<HTMLDivElement> | undefined) => solid_js376.JSX.HTMLAttributes<any>) => solid_js376.JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined
defaultScrollLeft—number
defaultScrollTop—number
id—string
ids—Partial<{ root: string; viewport: string; content: string; scrollbarX: string; scrollbarY: string; thumbX: string; thumbY: string; corner: string; }>

The ids of the elements in the scroll area. Useful for composition.

onScroll—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ScrollAreaScrollChangeDetails) => void

Callback when scroll position changes

scrollHideDelay600number

If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars.

type'hover'"auto" | "always" | "scroll" | "hover"

Describes the nature of scrollbar visibility - `auto`: Scrollbars are visible when content is overflowing - `always`: Scrollbars are always visible - `scroll`: Scrollbars are visible when the user is scrolling - `hover`: Scrollbars are visible when the user is hovering over the scroll area

virtual—import("/home/runner/work/ui/ui/packages/svelte/dist/index").ScrollAreaVirtualScrollOptions

Virtual scroll configuration. When provided, enables virtual scrolling.

Content

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Corner

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

RootProvider

PropDefaultType
value*—UseScrollAreaContext
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Scrollbar

PropDefaultType
orientation*—Orientation

The orientation of the scrollbar

asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Thumb

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Viewport

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined