VirtualController
Lit reactive controller owning a virtual model and its three layout refs.
Implements
ReactiveController
Constructors
Constructor
new VirtualController(
host,
params,
hostEvents?): VirtualController;Create and register a virtual model controller.
Parameters
host
ReactiveControllerHost
params
() => VirtualScrollerInitialParams
hostEvents?
number = 0
Returns
VirtualController
Properties
itemsRef
readonly itemsRef: Ref<HTMLElement>;Attach the element containing only the rendered item range.
scrollerRef
readonly scrollerRef: Ref<HTMLElement>;Attach the visible scroll viewport.
sizeRef
readonly sizeRef: Ref<HTMLElement>;Attach the element representing the complete native scroll size.
Accessors
model
Get Signature
get model(): VirtualScroller;Current model, recreated after a terminal host disconnect.
Returns
Methods
hostConnected()
hostConnected(): void;Recreate resources after a completed disconnect.
Returns
void
Implementation of
ReactiveController.hostConnectedhostDisconnected()
hostDisconnected(): void;Dispose model resources with the host.
Returns
void
Implementation of
ReactiveController.hostDisconnectedhostUpdated()
hostUpdated(): void;Synchronize model parameters after each host update.
Returns
void
Implementation of
ReactiveController.hostUpdatedRelated examples
- HorizontallitThis example virtualizes a horizontal collection: columns are measured and positioned along the x-axis while the browser keeps a native horizontal scrollbar.
- Simple ListlitThis is the smallest complete virtual list for each framework. Application data stays in the framework while the adapter renders and measures only the current visible range.
- Sticky Header And FooterlitThis example keeps a header and footer inside the scrolling viewport while the virtual item range remains measured and independently positioned.
- Variable SizelitThis example renders rows whose heights differ and can change after mount. Mounted items report their real border-box size, replacing the initial estimate without requiring application-side layout reads.
- GridlitThis example combines one vertical model and one horizontal model to virtualize a dynamic two-dimensional grid.
- Nested ContainerlitThis example separates the native scroll owner from the element that contains the virtual range. Content can appear before the list while core still measures the nested offset and publishes the correct geometry.