holmberd/virtual-scroller

<virtual-scroller> is a web component that provides a way to render a large number of elements in a scrollable list without negatively affecting overall UI performance. The component achives high performance by only rendering elements that are currently visible in its "viewport" and virtualizes elements not visible outside of it.

The <virtual-scroller> component is technology agnostic allowing you to use it with whichever rendering libary that you are already using in an existing project, e.g. React, lit, Vue...

<virtual-scroller> has great performance since it takes full advantage of the browser's ability to batch DOM updates which minimizes reflow and repaint. It also has a very small footprint allowing you to keep your bundles small for faster page loads.

Once called the virtual-scroller will calculate the visible range and dispatch a visible-range-change event. You can call this multiple times to reset the items scroll index, e.g. to increase item-count when a user scrolls down the list or when the height of an item changes.

Leave a Comment