createVirtual API

Virtual scrolling composable for efficiently rendering large lists by only rendering visible items.

Explore these related pages for additional context and usage patterns.

Page	Category
createVirtual	Data
createFilter	Data
createOverflow	Semantic

Functions

createVirtual

(items: Ref<readonly T[], readonly T[]>, _options?: VirtualOptions) => VirtualContext<T>

createVirtualContext

(items: Ref<readonly T[], readonly T[]>, _options?: VirtualContextOptions) => ContextTrinity<VirtualContext<T>>

Creates a virtual scrolling context with dependency injection support.

useVirtual

(namespace?: string) => VirtualContext<T>

Returns the current virtual context from dependency injection.

Options

itemHeight

string | number | null | undefined

The height of the item.

height

string | number | undefined

The height of the container.

overscan

number | undefined

The number of extra items to render.

direction

VirtualDirection | undefined

The direction of the scrolling.

anchor

VirtualAnchor | undefined

The anchor of the scrolling.

anchorSmooth

boolean | undefined

Whether to smooth the anchor position.

onStartReached

((distance: number) => void | Promise<void>) | undefined

The callback to call when the start is reached.

onEndReached

((distance: number) => void | Promise<void>) | undefined

The callback to call when the end is reached.

startThreshold

number | undefined

The threshold for the start.

endThreshold

number | undefined

The threshold for the end.

momentum

boolean | undefined

Whether to enable momentum scrolling.

elastic

boolean | undefined

Whether to enable elastic scrolling.

Properties

element

Ref<HTMLElement | undefined, HTMLElement | undefined>

The element that is being virtualized.

items

ComputedRef<VirtualItem<T>[]>

The items that are being virtualized.

offset

Readonly<ShallowRef<number>>

The offset of the virtualized items.

size

Readonly<ShallowRef<number>>

The size of the virtualized items.

state

ShallowRef<VirtualState>

The state of the virtualized items.

Methods

scrollTo

(index: number, options?: ScrollToOptions) => void

Scroll to an item by index.

scroll

() => void

The scroll event handler.

scrollend

() => void

The scrollend event handler.

resize

(index: number, height: number) => void

Resize an item by index.

reset

() => void

Reset the virtualized items.