### Install Virtua Package
Source: https://github.com/inokawa/virtua/blob/main/README.md
Install the virtua package using npm. If targeting legacy browsers without ResizeObserver, consider including a polyfill.
```sh
npm install virtua
```
--------------------------------
### scrollTo()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Scrolls the virtualized list to a specific pixel offset from the start.
```APIDOC
## scrollTo()
### Description
Scroll to the given offset.
### Parameters
#### offset
- **offset** (number) - offset from start
### Returns
- `void`
```
--------------------------------
### scrollTo()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md
Scrolls the virtualized list to a specific pixel offset from the start.
```APIDOC
## scrollTo(offset)
### Description
Scroll to the given offset.
### Parameters
#### offset
- `offset` (number) - offset from start
### Returns
- `void`
### Inherited from
- `VirtualizerHandle.scrollTo`
```
--------------------------------
### getItemOffset(index)
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md
Retrieves the starting pixel offset of a specific item within the virtualized list.
```APIDOC
## getItemOffset(index)
### Description
Get item offset from start.
### Parameters
#### index
- `index` (number) - index of item
### Returns
- `number` - The starting offset of the item.
```
--------------------------------
### scrollTo(offset)
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md
Scrolls the virtualized list to an absolute pixel offset from the start of the container.
```APIDOC
## scrollTo(offset)
### Description
Scroll to the given offset.
### Parameters
#### offset
- `offset` (number) - offset from start
### Returns
- `void`
```
--------------------------------
### scrollTo
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md
Scrolls the virtualized list to a specific pixel offset from the start. This method is inherited from VirtualizerHandle.
```APIDOC
## scrollTo()
### Description
Scroll to the given offset.
### Parameters
#### offset
- **offset** (number) - offset from start
### Returns
- `void`
### Inherited from
- `VirtualizerHandle.scrollTo`
```
--------------------------------
### scrollTo()
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerHandle.md
Scrolls the container to an absolute pixel offset from the start.
```APIDOC
## scrollTo()
### Description
Scroll to the given offset.
### Parameters
#### offset
- **offset** (number) - offset from start
### Returns
- **void**
```
--------------------------------
### ref_key
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
An optional string key to reference the virtualizer instance.
```APIDOC
## ref_key
### Description
An optional string key to reference the virtualizer instance.
### Type
`string`
### Optional
Yes
```
--------------------------------
### style
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Allows applying inline styles to the virtualizer element.
```APIDOC
## style
### Description
Allows applying inline styles to the virtualizer element.
### Type
`unknown`
### Optional
Yes
```
--------------------------------
### class
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Allows applying CSS classes to the virtualizer element.
```APIDOC
## class
### Description
Allows applying CSS classes to the virtualizer element.
### Type
`unknown`
### Optional
Yes
```
--------------------------------
### startMargin
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md
Optional offset in pixels to the scrollable parent before the virtualizer. This is useful if an element precedes the virtualizer, and its height needs to be accounted for.
```APIDOC
## startMargin?
### Description
Optional offset in pixels to the scrollable parent before the virtualizer. This is useful if an element precedes the virtualizer, and its height needs to be accounted for.
### Type
`number`
```
--------------------------------
### getItemOffset()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md
Retrieves the pixel offset of a specific item from the start of the scrollable area.
```APIDOC
## getItemOffset()
### Description
Get item offset from start.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- **number** - The offset of the item.
```
--------------------------------
### onVnodeBeforeMount
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Hook called before the virtualizer's VNode is mounted.
```APIDOC
## onVnodeBeforeMount
### Description
Hook called before the virtualizer's VNode is mounted. Can be a single hook or an array of hooks.
### Type
`VNodeMountHook` | `VNodeMountHook[]`
### Optional
Yes
```
--------------------------------
### getItemOffset()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Retrieves the pixel offset of a specific item from the start of the scrollable area.
```APIDOC
## getItemOffset()
### Description
Get item offset from start.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- `number` - The offset of the item in pixels.
```
--------------------------------
### getItemOffset()
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerHandle.md
Retrieves the pixel offset of a specific item from the start of the scroll container.
```APIDOC
## getItemOffset()
### Description
Get item offset from start.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- **number** - The pixel offset of the item.
```
--------------------------------
### VirtualizerHandle Methods
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerHandle.md
This section details the methods available on the VirtualizerHandle interface for managing and querying virtualized lists.
```APIDOC
## findItemIndex()
### Description
Finds the nearest item index from a given offset within the virtualized list.
### Parameters
#### offset
- **offset** (`number`) - The offset in pixels from the start of the scroll container.
### Returns
- `number` - The index of the nearest item.
```
```APIDOC
## getItemOffset()
### Description
Retrieves the starting offset of a specific item from the beginning of the scrollable area.
### Parameters
#### index
- **index** (`number`) - The index of the item.
### Returns
- `number` - The offset of the item from the start.
```
```APIDOC
## getItemSize()
### Description
Retrieves the size (height or width) of a specific item in the virtualized list.
### Parameters
#### index
- **index** (`number`) - The index of the item.
### Returns
- `number` - The size of the item.
```
```APIDOC
## scrollToIndex()
### Description
Scrolls the virtualized list to bring the item specified by its index into view.
### Parameters
#### index
- **index** (`number`) - The index of the item to scroll to.
#### opts
- **opts** (`ScrollToIndexOpts`) - Optional configuration for scrolling behavior.
### Returns
- `void`
```
```APIDOC
## scrollTo()
### Description
Scrolls the virtualized list to a specific pixel offset from the start.
### Parameters
#### offset
- **offset** (`number`) - The target offset in pixels from the start.
### Returns
- `void`
```
```APIDOC
## scrollBy()
### Description
Scrolls the virtualized list by a specified pixel offset relative to the current scroll position.
### Parameters
#### offset
- **offset** (`number`) - The amount to scroll in pixels from the current position.
### Returns
- `void`
```
--------------------------------
### Methods
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VListHandle.md
Methods available on the VListHandle interface for controlling and querying the virtualized list.
```APIDOC
## Methods
### findItemIndex()
> **findItemIndex**(`offset`): `number`
Find nearest item index from offset.
#### Parameters
##### offset
`number`
offset in pixels from the start of the scroll container
#### Returns
`number`
### getItemOffset()
> **getItemOffset**(`index`): `number`
Get item offset from start.
#### Parameters
##### index
`number`
index of item
#### Returns
`number`
### getItemSize()
> **getItemSize**(`index`): `number`
Get item size.
#### Parameters
##### index
`number`
index of item
#### Returns
`number`
### scrollToIndex()
> **scrollToIndex**(`index`, `opts?`): `void`
Scroll to the item specified by index.
#### Parameters
##### index
`number`
index of item
##### opts?
[`ScrollToIndexOpts`](../../react/interfaces/ScrollToIndexOpts.md)
options
#### Returns
`void`
### scrollTo()
> **scrollTo**(`offset`): `void`
Scroll to the given offset.
#### Parameters
##### offset
`number`
offset from start
#### Returns
`void`
### scrollBy()
> **scrollBy**(`offset`): `void`
Scroll by the given offset.
#### Parameters
##### offset
`number`
offset from current position
#### Returns
`void`
```
--------------------------------
### getItemOffset()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md
Retrieves the starting pixel offset of a specific item from the beginning of the scrollable area.
```APIDOC
## getItemOffset(index)
### Description
Get item offset from start.
### Parameters
#### index
- `index` (number) - index of item
### Returns
- `number` - The pixel offset of the item.
### Inherited from
- `VirtualizerHandle.getItemOffset`
```
--------------------------------
### Properties
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VListHandle.md
Properties available on the VListHandle interface for accessing virtualizer state.
```APIDOC
## Properties
### getCache
> **getCache**: () => `CacheSnapshot`
Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md).
#### Returns
`CacheSnapshot`
### getScrollOffset
> **getScrollOffset**: () => `number`
Get current scrollTop, or scrollLeft if horizontal: true.
#### Returns
`number`
### getScrollSize
> **getScrollSize**: () => `number`
Get current scrollHeight, or scrollWidth if horizontal: true.
#### Returns
`number`
### getViewportSize
> **getViewportSize**: () => `number`
Get current offsetHeight, or offsetWidth if horizontal: true.
#### Returns
`number`
```
--------------------------------
### experimental_VGrid
Source: https://github.com/inokawa/virtua/blob/main/docs/react/API.md
The experimental_VGrid component is an experimental component for virtualized grid layouts. Use with caution as it is under active development.
```APIDOC
## experimental_VGrid
### Description
An experimental component for creating virtualized grid layouts.
### Usage
```jsx
```
### Props
Refer to the `VGridProps` interface for a complete list of available props.
```
--------------------------------
### findItemIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md
Finds the nearest item index based on a given pixel offset from the start of the scroll container.
```APIDOC
## findItemIndex()
### Description
Find nearest item index from offset.
### Parameters
#### offset
- **offset** (number) - offset in pixels from the start of the scroll container
### Returns
- **number** - The nearest item index.
```
--------------------------------
### findItemIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Finds the nearest item index based on a given pixel offset from the start of the scroll container.
```APIDOC
## findItemIndex()
### Description
Find nearest item index from offset.
### Parameters
#### offset
- **offset** (number) - offset in pixels from the start of the scroll container
### Returns
- `number` - The nearest item index.
```
--------------------------------
### getItemOffset
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md
Retrieves the pixel offset of a specific item from the start of the scrollable area. This method is inherited from VirtualizerHandle.
```APIDOC
## getItemOffset()
### Description
Get item offset from start.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- `number` - The offset of the item in pixels.
### Inherited from
- `VirtualizerHandle.getItemOffset`
```
--------------------------------
### startMargin
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerProps.md
The offset to the scrollable parent in pixels. If an element is placed before the virtualizer, its height should be set using this prop.
```APIDOC
## startMargin
### Description
The offset to the scrollable parent before virtualizer in pixels. If you put an element before virtualizer, you have to set its height to this prop.
### Type
`number`
### Optional
`true`
```
--------------------------------
### VirtualizerHandle Properties
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerHandle.md
This section details the readable properties available on the VirtualizerHandle interface for inspecting the current state of the virtualized list.
```APIDOC
## cache
### Description
Provides a snapshot of the current caching state for the virtualized list.
### Type
[`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md)
```
```APIDOC
## scrollOffset
### Description
Represents the current scroll position. This will be the `scrollTop` for vertical scrolling or `scrollLeft` for horizontal scrolling.
### Type
`number`
```
```APIDOC
## scrollSize
### Description
Indicates the total scrollable size of the container. This is the `scrollWidth` for horizontal scrolling or `scrollHeight` for vertical scrolling.
### Type
`number`
```
```APIDOC
## viewportSize
### Description
Represents the visible size of the viewport. This is the `offsetWidth` for horizontal scrolling or `offsetHeight` for vertical scrolling.
### Type
`number`
```
--------------------------------
### findItemIndex(offset)
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md
Finds the index of the nearest item based on a given pixel offset from the start of the scroll container.
```APIDOC
## findItemIndex(offset)
### Description
Find nearest item index from offset.
### Parameters
#### offset
- `offset` (number) - offset in pixels from the start of the scroll container
### Returns
- `number` - The index of the nearest item.
```
--------------------------------
### getItemSize
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md
Gets the size (height or width, depending on orientation) of a specific item in the virtualized list. This method is inherited from VirtualizerHandle.
```APIDOC
## getItemSize()
### Description
Get item size.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- `number` - The size of the item.
### Inherited from
- `VirtualizerHandle.getItemSize`
```
--------------------------------
### WindowVirtualizer()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/functions/WindowVirtualizer.md
The WindowVirtualizer function creates a virtualizer instance controlled by the window's scrolling. It accepts props that define its behavior and returns a React element.
```APIDOC
## WindowVirtualizer()
### Description
Creates a virtualizer instance controlled by the window scrolling. This function is a wrapper around the base `Virtualizer` component, providing window-specific scroll handling.
### Signature
`WindowVirtualizer(props: WindowVirtualizerProps): Element`
### Parameters
- **props** (`WindowVirtualizerProps`) - Required - An object containing the configuration for the window virtualizer. This includes properties for data, item rendering, and scroll behavior. See the [WindowVirtualizerProps](../interfaces/WindowVirtualizerProps.md) interface for details.
### Returns
- `Element` - A React element that renders the virtualized content.
```
--------------------------------
### ScrollToIndexAlign
Source: https://github.com/inokawa/virtua/blob/main/docs/react/type-aliases/ScrollToIndexAlign.md
Defines the alignment options for scrolling to an item within a virtualized list. The possible values are 'start', 'center', 'end', or 'nearest'.
```APIDOC
## Type Alias: ScrollToIndexAlign
> **ScrollToIndexAlign** = `"start"` | `"center"` | `"end"` | `"nearest"`
Defined in: [src/core/types.ts:19](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/core/types.ts#L19)
```
--------------------------------
### VList()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/functions/VList.md
Virtualized list component. See VListProps and VListHandle.
```APIDOC
## VList()
### Description
Virtualized list component. See [VListProps](../interfaces/VListProps.md) and [VListHandle](../interfaces/VListHandle.md).
### Signature
`VList(props: VListProps): Element`
### Parameters
#### props
- `props` (VListProps) - Description of the props object for VList.
### Returns
- `Element` - The rendered virtualized list element.
```
--------------------------------
### Lazy Element Creation with Render Props
Source: https://github.com/inokawa/virtua/blob/main/README.md
Employ render props with memoization to lazily create elements, reducing startup costs for a large number of items. This approach can disable optimizations related to cached element instances, so memoizing the render function or component is recommended.
```tsx
// memoize render function with some memoization library
import memoize from "memoize";
const renderItem = memoize((item: Data) => {
return ;
});
{renderItem} ;
```
```tsx
// memoize component with React.memo
import { memo } from "react";
const Component = memo(HeavyItem);
{(item) => {
return ;
}}
;
```
--------------------------------
### findItemIndex
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListHandle.md
Finds the nearest item index based on a given pixel offset from the start of the scroll container. This method is inherited from VirtualizerHandle.
```APIDOC
## findItemIndex()
### Description
Find nearest item index from offset.
### Parameters
#### offset
- **offset** (number) - offset in pixels from the start of the scroll container
### Returns
- `number` - The index of the nearest item.
### Inherited from
- `VirtualizerHandle.findItemIndex`
```
--------------------------------
### cache
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerHandle.md
Provides a read-only snapshot of the current caching state of the virtualizer.
```APIDOC
## cache
### Description
Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md).
### Type
`readonly CacheSnapshot`
```
--------------------------------
### cache
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Provides a read-only snapshot of the current caching state of the virtualizer.
```APIDOC
## cache
### Description
Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md).
### Type
- `readonly` CacheSnapshot
```
--------------------------------
### cache
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md
Provides a snapshot of the current caching state for the virtualized list.
```APIDOC
## cache
### Description
Get current [CacheSnapshot](../../react/interfaces/CacheSnapshot.md).
### Type
- `readonly CacheSnapshot`
### Inherited from
- `VirtualizerHandle.cache`
```
--------------------------------
### experimental_VGrid
Source: https://github.com/inokawa/virtua/blob/main/docs/react/variables/experimental_VGrid.md
Virtualized grid component. See VGridProps and VGridHandle.
```APIDOC
## experimental_VGrid
### Description
Virtualized grid component. See [VGridProps](../interfaces/VGridProps.md) and [VGridHandle](../interfaces/VGridHandle.md).
### Type
`const experimental_VGrid: ForwardRefExoticComponent>`
```
--------------------------------
### VirtualizerProps Interface
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerProps.md
Props for the Virtualizer component.
```APIDOC
## Interface: VirtualizerProps
### Type Parameters
* **T**: The type of the data items.
### Properties
* **ref?** (`optional`): (`handle?`) => `void`
Get reference to [VirtualizerHandle](VirtualizerHandle.md).
* **handle?**: [`VirtualizerHandle`](VirtualizerHandle.md)
* **data**: readonly `T`[]
The data items rendered by this component.
* **children**: (`data`, `index`) => `Element`
The elements renderer function.
* **data**: `T`
* **index**: `Accessor`<`number`>
* **bufferSize?** (`optional`): `number`
Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
* **Default Value**: `200`
* **as?** (`optional`): `ValidComponent`
Component or element type for container element.
* **Default Value**: `"div"`
* **item?** (`optional`): `ValidComponent`
Component or element type for item element.
* **Default Value**: `"div"`
* **scrollRef?** (`optional`): `HTMLElement`
Reference to the scrollable element. The default will get the direct parent element of virtualizer.
* **itemSize?** (`optional`): `number`
Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly.
* If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
* If set, you can opt out estimation and use the value as initial item size.
* **shift?** (`optional`): `boolean`
While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
* **horizontal?** (`optional`): `boolean`
If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
* **keepMounted?** (`optional`): readonly `number`[]
List of indexes that should be always mounted, even when off screen.
* **cache?** (`optional`): [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md)
You can restore cache by passing a [CacheSnapshot](../../react/interfaces/CacheSnapshot.md) on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from [VirtualizerHandle.cache](VListHandle.md#cache).
* **The length of items should be the same as when you take the snapshot, otherwise restoration may not work as expected.**
```
--------------------------------
### item
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VirtualizerProps.md
Specifies the component or element type used for rendering each item within the virtualizer. It accepts a component, element type, or a key of intrinsic elements. This component receives CustomItemComponentProps.
```APIDOC
## item
### Description
Component or element type for item element. This component will get [CustomItemComponentProps](../type-aliases/CustomItemComponentProps.md) as props.
### Type
`optional` **item?**: [`CustomItemComponent`](../type-aliases/CustomItemComponent.md) \| keyof IntrinsicElements
### Default Value
```ts
"div"
```
```
--------------------------------
### scrollToIndex(index, opts?)
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md
Scrolls the virtualized list to bring the item at the specified index into view. Optional options can be provided to control the scroll behavior.
```APIDOC
## scrollToIndex(index, opts?)
### Description
Scroll to the item specified by index.
### Parameters
#### index
- `index` (number) - index of item
#### opts?
- `opts` ([`ScrollToIndexOpts`](../../react/interfaces/ScrollToIndexOpts.md)) - options
### Returns
- `void`
```
--------------------------------
### onVnodeMounted
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Hook called after the virtualizer's VNode is mounted.
```APIDOC
## onVnodeMounted
### Description
Hook called after the virtualizer's VNode is mounted. Can be a single hook or an array of hooks.
### Type
`VNodeMountHook` | `VNodeMountHook[]`
### Optional
Yes
```
--------------------------------
### VirtualizerProps Interface
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md
The VirtualizerProps interface defines the configuration options for the Virtualizer component.
```APIDOC
## Interface: VirtualizerProps
Props of [Virtualizer](../variables/VList.md).
### Type Parameters
### T
`T`
### Properties
### data
> **data**: readonly `T`[]
The data items rendered by this component.
***
### children
> **children**: `Snippet`
The elements renderer snippet.
***
### getKey?
> `optional` **getKey?**: (`data`, `index`) => `string` | `number`
Function that returns the key of an item in the list. It's recommended to specify whenever possible for performance.
#### Parameters
##### data
`T`
##### index
`number`
#### Returns
`string` | `number`
#### Default
```ts
defaultGetKey (returns index of item)
```
***
### as?
> `optional` **as?**: keyof SvelteHTMLElements
Component or element type for container element.
#### Default Value
```ts
"div"
```
***
### item?
> `optional` **item?**: keyof SvelteHTMLElements
Component or element type for item element.
#### Default Value
```ts
"div"
```
***
### bufferSize?
> `optional` **bufferSize?**: `number`
Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
#### Default Value
```ts
200
```
***
### scrollRef?
> `optional` **scrollRef?**: `HTMLElement`
Reference to the scrollable element. The default will get the direct parent element of virtualizer.
***
### itemSize?
> `optional` **itemSize?**: `number`
Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly.
- If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
- If set, you can opt out estimation and use the value as initial item size.
***
### ssrCount?
> `optional` **ssrCount?**: `number`
A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0.
***
### shift?
> `optional` **shift?**: `boolean`
While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
***
### horizontal?
> `optional` **horizontal?**: `boolean`
If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
***
### keepMounted?
> `optional` **keepMounted?**: readonly `number`[]
List of indexes that should be always mounted, even when off screen.
***
```
--------------------------------
### scrollToIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerHandle.md
Scrolls the virtualized window to bring a specific item into view.
```APIDOC
## scrollToIndex()
### Description
Scroll to the item specified by index.
### Parameters
#### index
- **index** (number) - index of item
#### opts
- **opts** (ScrollToIndexOpts) - options
### Returns
- **void**
```
--------------------------------
### scrollToIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/WindowVirtualizerHandle.md
Scrolls the virtualized window to bring a specific item into view.
```APIDOC
## scrollToIndex()
### Description
Scroll to the item specified by index.
### Parameters
#### index
- **index** (number) - index of item
#### opts
- **opts** (ScrollToIndexOpts) - Optional configuration for scrolling.
### Returns
- **void**
```
--------------------------------
### cache
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerProps.md
Allows restoring the scroll position by providing a cache snapshot. The snapshot should be obtained from `VirtualizerHandle.cache`. Ensure the item length matches the snapshot for expected behavior.
```APIDOC
## cache
### Description
Restores the scroll position using a provided cache snapshot.
### Type
`CacheSnapshot` (optional)
### Details
The `CacheSnapshot` object can be obtained from `VirtualizerHandle.cache`. It's crucial that the length of items matches the snapshot's length for successful restoration. This is particularly useful for maintaining scroll position across navigation events.
```
--------------------------------
### cache
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerProps.md
Optional cache snapshot to restore scroll position. The snapshot can be obtained from `VirtualizerHandle.getCache`. Ensure the item count matches the snapshot for expected behavior.
```APIDOC
## cache?
### Description
Optional cache snapshot to restore scroll position. The snapshot can be obtained from `VirtualizerHandle.getCache`. Ensure the item count matches the snapshot for expected behavior.
### Type
[`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md)
```
--------------------------------
### onVnodeBeforeUnmount
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Hook called before the virtualizer's VNode is unmounted.
```APIDOC
## onVnodeBeforeUnmount
### Description
Hook called before the virtualizer's VNode is unmounted. Can be a single hook or an array of hooks.
### Type
`VNodeMountHook` | `VNodeMountHook[]`
### Optional
Yes
```
--------------------------------
### VirtualizerProps
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/VirtualizerProps.md
Props for the Virtualizer component.
```APIDOC
## Interface: VirtualizerProps
Defined in: [src/vue/Virtualizer.tsx:35](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L35)
Props of [Virtualizer](../variables/Virtualizer.md).
Extends:
- `PublicProps`
Type Parameters:
### T
`T` = `unknown`
## Properties
### data
> **data**: `T`[]
Defined in: [src/vue/Virtualizer.tsx:39](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L39)
The data items rendered by this component.
***
### bufferSize?
> `optional` **bufferSize?**: `number`
Defined in: [src/vue/Virtualizer.tsx:44](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L44)
Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
#### Default Value
```ts
200
```
***
### itemSize?
> `optional` **itemSize?**: `number`
Defined in: [src/vue/Virtualizer.tsx:51](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L51)
Item size hint for unmeasured items in pixels. It will help to reduce scroll jump when items are measured if used properly.
- If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
- If set, you can opt out estimation and use the value as initial item size.
***
### shift?
> `optional` **shift?**: `boolean`
Defined in: [src/vue/Virtualizer.tsx:55](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L55)
While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
***
### horizontal?
> `optional` **horizontal?**: `boolean`
Defined in: [src/vue/Virtualizer.tsx:59](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L59)
If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
***
### startMargin?
> `optional` **startMargin?**: `number`
Defined in: [src/vue/Virtualizer.tsx:63](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L63)
The offset to the scrollable parent before virtualizer in pixels. If you put an element before virtualizer, you have to set its height to this prop.
***
### ssrCount?
> `optional` **ssrCount?**: `number`
Defined in: [src/vue/Virtualizer.tsx:67](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L67)
A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated. The minimum value is 0.
***
### scrollRef?
> `optional` **scrollRef?**: `HTMLElement`
Defined in: [src/vue/Virtualizer.tsx:71](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L71)
Reference to the scrollable element. The default will get the direct parent element of virtualizer.
***
### as?
> `optional` **as?**: keyof IntrinsicElementAttributes
Defined in: [src/vue/Virtualizer.tsx:76](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L76)
Component or element type for container element.
#### Default Value
```ts
"div"
```
***
### item?
> `optional` **item?**: keyof IntrinsicElementAttributes
Defined in: [src/vue/Virtualizer.tsx:81](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L81)
Component or element type for item element.
#### Default Value
```ts
"div"
```
***
### itemProps?
> `optional` **itemProps?**: `ItemProps`
Defined in: [src/vue/Virtualizer.tsx:87](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L87)
A function that provides properties/attributes for item element
**This prop will be merged into `item` prop in the future**
***
### keepMounted?
> `optional` **keepMounted?**: readonly `number`[]
Defined in: [src/vue/Virtualizer.tsx:91](https://github.com/inokawa/virtua/blob/999051328a6324a7656aeca6f86ac1a6503bfbe7/src/vue/Virtualizer.tsx#L91)
List of indexes that should be always mounted, even when off screen.
```
--------------------------------
### getItemSize(index)
Source: https://github.com/inokawa/virtua/blob/main/docs/svelte/interfaces/VirtualizerHandle.md
Retrieves the calculated size (height or width) of a specific item in the virtualized list.
```APIDOC
## getItemSize(index)
### Description
Get item size.
### Parameters
#### index
- `index` (number) - index of item
### Returns
- `number` - The size of the item.
```
--------------------------------
### getItemSize()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Retrieves the size (height or width) of a specific item in the virtualized list.
```APIDOC
## getItemSize()
### Description
Get item size.
### Parameters
#### index
- **index** (number) - index of item
### Returns
- `number` - The size of the item in pixels.
```
--------------------------------
### onVnodeBeforeUpdate
Source: https://github.com/inokawa/virtua/blob/main/docs/vue/interfaces/WindowVirtualizerProps.md
Hook called before the virtualizer's VNode is updated.
```APIDOC
## onVnodeBeforeUpdate
### Description
Hook called before the virtualizer's VNode is updated. Can be a single hook or an array of hooks.
### Type
`VNodeUpdateHook` | `VNodeUpdateHook[]`
### Optional
Yes
```
--------------------------------
### scrollToIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VListHandle.md
Scrolls the virtualized list to make a specific item visible.
```APIDOC
## scrollToIndex(index, opts?)
### Description
Scroll to the item specified by index.
### Parameters
#### index
- `index` (number) - index of item
#### opts?
- `opts` (ScrollToIndexOpts) - options
### Returns
- `void`
### Inherited from
- `VirtualizerHandle.scrollToIndex`
```
--------------------------------
### scrollToIndex()
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/VirtualizerHandle.md
Scrolls the virtualized list to bring a specific item into view.
```APIDOC
## scrollToIndex()
### Description
Scroll to the item specified by index.
### Parameters
#### index
- **index** (number) - index of item
#### opts?
- **opts** (ScrollToIndexOpts) - options for scrolling
### Returns
- `void`
```
--------------------------------
### onScroll
Source: https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/WindowVirtualizerProps.md
A callback function that is invoked whenever the scroll offset of the virtualized window changes. It does not receive any arguments and returns void.
```APIDOC
## onScroll
### Description
Callback invoked whenever scroll offset changes.
### Type
`optional` **onScroll?**: () => `void`
### Defined in
`src/react/WindowVirtualizer.tsx:130`
```
--------------------------------
### WindowVirtualizerProps Interface
Source: https://github.com/inokawa/virtua/blob/main/docs/solid/interfaces/WindowVirtualizerProps.md
Defines the properties that can be passed to the WindowVirtualizer component.
```APIDOC
## Interface: WindowVirtualizerProps
### Type Parameters
* **T**: The type of data items.
### Properties
* **ref?**: (`handle?`) => `void`
* Optional. Gets a reference to the `WindowVirtualizerHandle`.
* **Parameters**:
* **handle?**: [`WindowVirtualizerHandle`](WindowVirtualizerHandle.md)
* **Returns**: `void`
* **data**: readonly `T`[]
* Required. The data items to be rendered by the component.
* **children**: (`data`, `index`) => `Element`
* Required. A function that renders each item.
* **Parameters**:
* **data**: `T` - The data for the current item.
* **index**: `Accessor`<`number`> - An accessor for the current item's index.
* **Returns**: `Element`
* **bufferSize?**: `number`
* Optional. Extra item space in pixels to render before/after the viewport. Minimum value is 0. Lower values improve performance but might show blank items during fast scrolling.
* **Default Value**: `200`
* **itemSize?**: `number`
* Optional. Item size hint in pixels for unmeasured items. Helps reduce scroll jumps when items are measured. If not set, initial sizes are estimated from measured sizes (recommended). If set, you can opt out of estimation.
* **shift?**: `boolean`
* Optional. If true, scroll position is maintained from the end (not the start) when items are added/removed from the beginning. Recommended to set to `false` if modifying the list from the middle/end to avoid unexpected behavior. Useful for reverse infinite scrolling.
* **horizontal?**: `boolean`
* Optional. If true, renders a horizontally scrollable list. Otherwise, renders a vertically scrollable list.
* **cache?**: [`CacheSnapshot`](../../react/interfaces/CacheSnapshot.md)
* Optional. Pass a `CacheSnapshot` on mount to restore the cache (e.g., scroll position after navigation). The snapshot can be obtained from `WindowVirtualizerHandle.cache`. **Note**: The length of items should match the snapshot's length for expected restoration.
* **onScroll?**: () => `void`
* Optional. Callback invoked whenever the scroll offset changes.
* **Returns**: `void`
* **onScrollEnd?**: () => `void`
* Optional. Callback invoked when scrolling stops.
* **Returns**: `void`
```