# rintoj/ngx-virtual-scroller

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rintoj-ngx-virtual-scroller).**

985 stars · 292 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/rintoj/ngx-virtual-scroller
- Homepage: https://rintoj.github.io/ngx-virtual-scroller
- awesome-repositories: https://awesome-repositories.com/repository/rintoj-ngx-virtual-scroller.md

## Topics

`angular2` `angular2-component` `infinite` `virtual-scroll`

## Description

An angular virtual scroller component renders large datasets efficiently by displaying only visible items in the viewport, recycling existing DOM elements, and maintaining constant element counts. It handles variable item heights and widths through dynamic sizing calculations and buffer adjustments, while maintaining hidden buffer zones above and below the visible viewport to prevent visual flickering during rapid scrolling.

The library supports event-driven infinite loading by listening for scroll threshold proximity events to trigger chunked data fetching and append new items automatically. It also provides server-side dimension emulation and polyfill configuration to generate correct initial HTML snapshots prior to client hydration, alongside parent-container scroll delegation that redirects scroll listeners and measurements to outer wrapper elements or the main window.

Additional capabilities include multi-column grid layouts with right-to-left reading direction support, tabular data rendering with sticky headers, element nesting for supplementary controls, and programmatic navigation to specific items or exact pixel positions. Global default configuration primitives allow consistent settings to be applied across all component instances without repeating code.

## Tags

### Graphics & Multimedia

- [DOM Node Recycling](https://awesome-repositories.com/f/graphics-multimedia/viewport-culling/overscan-viewport-cullers/dom-node-recycling.md) — Renders only visible items in the current viewing window while recycling existing DOM elements to maintain high performance with large datasets.

### System Administration & Monitoring

- [Viewport Buffers](https://awesome-repositories.com/f/system-administration-monitoring/terminal-buffering-systems/double-buffering/graphical-frame-buffers/double-buffered-rendering/viewport-buffers.md) — Maintains hidden buffer zones above and below the visible viewport to prevent visual flickering during rapid scrolling.

### User Interface & Experience

- [Virtual Scroller Components](https://awesome-repositories.com/f/user-interface-experience/component-libraries/angular-ui-libraries/virtual-scroller-components.md) — Provides high-performance user interface components for Angular web applications with clean APIs and reliable rendering.
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Renders large datasets efficiently by displaying only visible items in the viewport, recycling DOM elements, and keeping element counts constant. ([source](https://github.com/rintoj/ngx-virtual-scroller#readme))
- [Large List Renderers](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering/large-list-renderers.md) — Displays thousands of rows or cards in a web browser smoothly without freezing the user interface or slowing down scrolling.
- [Dynamic Size List Components](https://awesome-repositories.com/f/user-interface-experience/item-lists/interactive-list-items/dynamic-scrolling-lists/dynamic-size-list-components.md) — Handles variable item heights and widths within virtualized scrolling lists with buffer adjustments.
- [Dynamic Item Size Calculators](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/dynamic-item-size-calculators.md) — Adjusts rendering calculations for items with unequal heights and widths by enabling dynamic sizing options and buffer adjustments. ([source](https://github.com/rintoj/ngx-virtual-scroller/blob/master/README.md))
- [Virtual Scrollers](https://awesome-repositories.com/f/user-interface-experience/virtual-scrollers.md) — Renders large lists efficiently by displaying only visible items in the viewport and recycling DOM elements.
- [Virtual Multi-Column Grids](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/vertical-column-layouts/css-column-count-multi-column-layouts/virtual-multi-column-grids.md) — Arranges items across multiple columns while handling elements with varying heights, widths, and right-to-left reading directions. ([source](https://github.com/rintoj/ngx-virtual-scroller#readme))
- [Infinite Scroll Components](https://awesome-repositories.com/f/user-interface-experience/infinite-scroll-components.md) — Triggers fetch events at the scroll end to load and append data chunks dynamically.
- [Infinite Scroll Implementations](https://awesome-repositories.com/f/user-interface-experience/infinite-scroll-implementations.md) — Loads and appends data in chunks as the user scrolls down a long list to create a seamless infinite feed.
- [Programmatic Item Navigation](https://awesome-repositories.com/f/user-interface-experience/programmatic-item-navigation.md) — Programmatically jumps straight to particular items or exact pixel positions within the list without manual swiping. ([source](https://github.com/rintoj/ngx-virtual-scroller#readme))
- [Dimension Emulations](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/initial-dimension-configurators/dimension-emulations.md) — Injects mock element dimensions and environment polyfills during server rendering to generate correct initial HTML snapshots prior to client hydration.
- [Scroll Delegations](https://awesome-repositories.com/f/user-interface-experience/scroll-chaining-containers/scroll-delegations.md) — Redirects scroll event listeners and measurements to outer wrapper elements or the main window instead of the internal host container.
- [Infinite Scroll Triggers](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/custom-scroll-triggers/infinite-scroll-triggers.md) — Listens for scroll threshold proximity events to trigger chunked data fetching and append new items to the scrollable range.
- [Scroll Container Delegations](https://awesome-repositories.com/f/user-interface-experience/scroll-containers/scroll-container-delegations.md) — Directs scrolling behavior to use parent container elements or the main window scrollbar instead of the default component container. ([source](https://github.com/rintoj/ngx-virtual-scroller#readme))
- [Sticky Header Tables](https://awesome-repositories.com/f/user-interface-experience/tabular-data-components/sticky-header-tables.md) — Structures scrolling content inside HTML table elements with optional sticky headers that remain fixed during scrolling. ([source](https://github.com/rintoj/ngx-virtual-scroller/blob/master/README.md))
- [Server-Side Components](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/server-side-components.md) — Supports server-side rendering and hydration for generating correct initial HTML snapshots of virtualized lists.

### Web Development

- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Configures polyfills and dimensions to generate correct initial HTML snapshots for server-rendered environments before full client hydration. ([source](https://github.com/rintoj/ngx-virtual-scroller/blob/master/README.md))
- [List Virtualization Optimizations](https://awesome-repositories.com/f/web-development/server-side-rendering/list-virtualization-optimizations.md) — Generates correct initial HTML snapshots of dynamic lists on the server before client-side hydration takes over.