af-utils / virtual

Frequently asked questions

Something is not working as expected? Here is the list of hints that may help.

Why do I need to use ref?

In order to work smoothly, library must know scrolled item sizes. Initially they equal estimatedItemSize. But this is usually not enough, because estimated and real sizes may differ. ResizeObserver is used internally for more accurate measurements, but you must provide mounted items explicitly in conjunction with their indexes.

Do I need to use css classes, provided in examples?

Not necessary. This website was build with tailwind, but you may use your styling approach.

How many items virtual scroller can handle?

Maximum itemcount value is 2_147_483_647 (int32 max). This limit exists, because item sizes cache implementation has bitwise operations, which work only with int32. But there is one more limit. W3C does not provide maximum allowed values for height, width, margin, etc.

CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions

This quote was found here. Chrome's experimentally found maximum value is 33_554_428. So some problems may happen if scrollSize is bigger.

Is Server-side rendering supported?

Yes, use estimatedWidgetSize and estimatedItemSize for fine-tuning. Quantity of server-rendered items can be determined like this: Math.min( itemCount, Math.ceil( estimatedWidgetSize / estimatedItemSize ) + overscanCount ).