API: Core
VirtualScrollDirective
Virtual scroll directive that calculates which items should be rendered based on the viewport size and scroll position.
Overview
Virtual scroll directive that calculates which items should be rendered based on the viewport size and scroll position.
Apply it to the scrollable container. The consumer is responsible for
rendering the items using visibleItems() and setting the content height.
- Kind: Directive
- Export as:
qzVirtualScroll - Source: packages/core/src/virtual-scroll/virtual-scroll.directive.ts:40
Selector
[qzVirtualScroll]
Inputs
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
items |
T[] |
Yes | Full array of items to virtualize. | |
itemSize |
number |
Yes | Fixed pixel height of each item. | |
buffer |
number |
5 |
Extra items to render outside the viewport (default 5). |
Properties
| Name | Type | Description |
|---|---|---|
readonly contentHeight |
Signal<number> |
Total scrollable content height. |
readonly startIndex |
Signal<number> |
First index that should be rendered. |
readonly endIndex |
Signal<number> |
Last index that should be rendered. |
readonly visibleItems |
Signal<VirtualScrollRow<T>[]> |
Items currently visible (plus buffer) with their pixel offsets. |
readonly count |
Signal<number> |
Number of items in the data set. |
Public methods
scrollToIndex
scrollToIndex(index: number, behavior?: ScrollBehavior): void
Scroll the viewport so that the item at index is visible.
| Parameter | Type | Optional | Description |
|---|---|---|---|
index |
number |
||
behavior |
ScrollBehavior |
Yes |
scrollToOffset
scrollToOffset(offset: number, behavior?: ScrollBehavior): void
Scroll to a specific pixel offset.
| Parameter | Type | Optional | Description |
|---|---|---|---|
offset |
number |
||
behavior |
ScrollBehavior |
Yes |