createVirtual API

API reference for the createVirtual composable.

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.