Getting started

When you need to render a list or grid with a lot of rows or columns, you may face performance problems. A lot of DOM nodes must be created, but only a few of them are visible. One way to optimize this is called virtual scroll. Based on scroll position and size of each item we can calculate the range to show. Only visible elements are rendered with this approach.

Messy room with only webcam-visible piece cleaned
row 0
row 1
row 2
row 3
row 4
row 5
row 6
row 7
row 8
row 9
row 10

Variable item sizes with on-the-fly remeasurement are also supported.

Installation

Install desired adapter using your package manager

  • React

    npm install @af-utils/virtual-react

  • Core (no framework)

    Library core is just housing sizes and offsets, so rendering falls on your shoulders.

    npm install @af-utils/virtual-core

Typescript

Library core and adapters are written in Typescript with TSDoc comments. This results in good IntelliSense

Supported browsers

"browserslist": [
    ">0.6%",
    "not op_mini all"
]

Browserslist.dev