logo svelte /virtual list v0.5.2

Methods

Programmatic control methods available on the VirtualList component.

file · MethodsExample.svelte mode · live running open source
● ready
Item 0 first row
Item 1 stable offset
Item 2 stable offset
Item 3 stable offset
Item 4 stable offset
Item 5 stable offset
Item 6 stable offset
Item 7 stable offset
Item 8 stable offset
Item 9 stable offset
Item 10 stable offset
Item 11 stable offset
Item 12 stable offset
Item 13 stable offset
Item 14 stable offset
Item 15 stable offset
Item 16 stable offset
Item 17 stable offset
Item 18 stable offset
Item 19 stable offset
Item 20 stable offset
method · scroll()
target · 500
range · 0-0
dom rows · 0
dom nodes · 0

Getting a Reference

Use Svelte’s bind:this to get a component reference:

<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'

    let listRef: VirtualList
</script>

<VirtualList bind:this={listRef} {items}>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>
<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'

    let listRef: VirtualList
</script>

<VirtualList bind:this={listRef} {items}>
    {#snippet renderItem(item)}
        <div>{item.text}</div>
    {/snippet}
</VirtualList>

scroll()

Scroll to a specific item by index.

Signature

scroll(options: SvelteVirtualListScrollOptions): void
scroll(options: SvelteVirtualListScrollOptions): void

Options

PropertyTypeDefaultDescription
indexnumberrequiredTarget item index
smoothScrollbooleantrueUse smooth scroll animation
align'auto' \| 'top' \| 'bottom' \| 'nearest''auto'Alignment of target item
shouldThrowOnBoundsbooleantrueThrow error if index out of bounds

Examples

Scroll to item 100:

listRef.scroll({ index: 100 })
listRef.scroll({ index: 100 })

Scroll to top of list:

listRef.scroll({ index: 0, align: 'top' })
listRef.scroll({ index: 0, align: 'top' })

Scroll to bottom:

listRef.scroll({ index: items.length - 1, align: 'bottom' })
listRef.scroll({ index: items.length - 1, align: 'bottom' })

Instant scroll (no animation):

listRef.scroll({ index: 500, smoothScroll: false })
listRef.scroll({ index: 500, smoothScroll: false })

Alignment Options

ValueBehavior
'auto'Minimal scroll to make item visible
'top'Align item to top of viewport
'bottom'Align item to bottom of viewport
'nearest'Scroll to nearest edge if not visible

scrollToTop()

Convenience method to scroll to the beginning.

listRef.scrollToTop()
listRef.scrollToTop()

scrollToBottom()

Convenience method to scroll to the end.

listRef.scrollToBottom()
listRef.scrollToBottom()