When the amount of data is too large, Virtual scrolling cannot be displayed completely

[z505985755]

As shown in the figure, a basic virtual scroll, when the amount of data is 3000000, cannot display all the data

[HitomiTenshi]

See issue #14990

Important to note: Virtual scroll is not endless. Browsers have height limits for elements:

• Webkit/Blink 134,217,726 px
• Gecko 10,737,418 px
• Trident 17,895,697 px

(Source: https://clusterize.js.org/)

[amasen02]

The mathematical reason this breaks: with 3,000,000 items at a standard item height (say 40px–50px), the total virtual container height would need to be 120,000,000px to 150,000,000px.

Every browser engine enforces a hard limit on CSS element height (max-height / scrollHeight):

• Firefox (Gecko): Clamps at ~17.8 million pixels.
• Chrome / Edge (Blink): Clamps at ~33.5 million pixels.
• Safari (WebKit): Clamps at ~134 million pixels.

Once totalItems * itemSize exceeds the browser's pixel limit, the DOM renderer clamps the viewport spacer height, meaning the scrollbar reaches the bottom while millions of rows remain unreached. Furthermore, at 3 million items, moving the scrollbar thumb by just 1 pixel jumps over 10,000 items, making manual navigation physically impossible.

Here are the two production patterns to handle massive datasets in Angular CDK:

1. Implement a Custom DataSource with Paged Windowing

Instead of binding an array of 3,000,000 items into *cdkVirtualFor, implement @angular/cdk/collections DataSource<T>. This lets the viewport request only a sliding slice (e.g., 500–1,000 items around the active range):

import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { Observable, BehaviorSubject, Subscription } from 'rxjs';

export class LargeDatasetDataSource extends DataSource<MyItem> {
  private _pageSize = 1000;
  private _dataStream = new BehaviorSubject<MyItem[]>([]);
  private _subscription = new Subscription();

  connect(collectionViewer: CollectionViewer): Observable<MyItem[]> {
    this._subscription.add(
      collectionViewer.viewChange.subscribe(range => {
        // Fetch only the chunk surrounding the user's current range
        const pageIndex = Math.floor(range.start / this._pageSize);
        this.loadChunk(pageIndex);
      })
    );
    return this._dataStream;
  }

  disconnect(): void {
    this._subscription.unsubscribe();
  }

  private loadChunk(pageIndex: number) {
    // Slice from memory or fetch from backend API
    const slice = fetchPageSlice(pageIndex, this._pageSize);
    this._dataStream.next(slice);
  }
}

2. Architectural UX Pattern: Faceting & Indexing

For datasets in the millions, pure continuous scrolling should be combined with server-side indexing:

• Maintain an active viewport size bounded to 5,000–10,000 items maximum (keeping total pixel height safely under 500,000px).
• Provide search-as-you-type, range sliders, or column filters to narrow the 3M records down to the relevant subset before feeding it to the virtual scroll.
• If continuous scanning is required, use a "Jump to Index / Date" control that calls viewport.scrollToIndex(targetIndex) programmatically.