Methods

Programmatic control methods available on the VirtualList component.

scroll() method

smooth

Item 0

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

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

Property	Type	Default	Description
`index`	`number`	required	Target item index
`smoothScroll`	`boolean`	`true`	Use smooth scroll animation
`align`	`'auto' \\| 'top' \\| 'bottom' \\| 'nearest'`	`'auto'`	Alignment of target item
`shouldThrowOnBounds`	`boolean`	`true`	Throw 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

Value	Behavior
`'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()