angular/components · error · Error

cdk-virtual-scroll: scrolledIndexChange is currently not sup

Error message

cdk-virtual-scroll: scrolledIndexChange is currently not supported for the autosize scroll strategy

What it means

The experimental AutoSizeVirtualScrollStrategy does not implement the scrolledIndexChange observable of the VirtualScrollStrategy interface. Subscribing to it throws this error in dev mode (ngDevMode builds only; production silently yields). It is a deliberately unimplemented experimental feature marked with a TODO.

Source

Thrown at src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts:74

        this._totalWeight = newTotalWeight;
      }
    }
  }

  /** Resets the averager. */
  reset() {
    this._averageItemSize = this._defaultItemSize;
    this._totalWeight = 0;
  }
}

/** Virtual scrolling strategy for lists with items of unknown or dynamic size. */
export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
  /** @docs-private Implemented as part of VirtualScrollStrategy. */
  scrolledIndexChange = new Observable<number>(() => {
    // TODO(mmalerba): Implement.
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      throw Error(
        'cdk-virtual-scroll: scrolledIndexChange is currently not supported for the' +
          ' autosize scroll strategy',
      );
    }
  });

  /** The attached viewport. */
  private _viewport: CdkVirtualScrollViewport | null = null;

  /** The minimum amount of buffer rendered beyond the viewport (in pixels). */
  private _minBufferPx: number;

  /** The number of buffer items to render beyond the edge of the viewport (in pixels). */
  private _maxBufferPx: number;

  /** The estimator used to estimate the size of unseen items. */
  private _averager: ItemSizeAverager;

View on GitHub (pinned to 0411926e7d)

Solutions

Track scroll position yourself via CdkVirtualScrollViewport's element scroll events or the viewport.checkViewportSize()/renderedRangeStream instead of scrolledIndexChange.
Use a non-experimental strategy (FixedSizeVirtualScrollStrategy via itemSize, or the variable-size strategy with minBufferPx/maxBufferPx) if you need scrolledIndexChange.
Wait for the feature: it is an unimplemented TODO in the experimental package; avoid relying on it.

Example fix

// before
viewport.scrolledIndexChange.subscribe(i => this.loadMore(i)); // throws with autosize
// after
fromEvent(viewport.elementRef.nativeElement, 'scroll')
  .subscribe(() => this.loadMore(viewport.measureScrollOffset()));

Defensive patterns

Strategy: validation

Validate before calling

if (viewport.strategy instanceof AutoSizeVirtualScrollStrategy) {
  // don't subscribe to scrolledIndexChange — fall back to native scroll events
}

Try / catch

try {
  viewport.scrolledIndexChange.subscribe(onScrollIndex);
} catch {
  // autosize strategy: use native element scroll events instead
  fromEvent(viewport.elementRef.nativeElement, 'scroll').subscribe(onNativeScroll);
}

Prevention

Check the experimental autosize strategy's docs/TODOs before using its VirtualScrollStrategy API surface.
Use renderedRangeStream or native scroll events as portable alternatives.
Gate strategy-dependent code behind a check of which strategy is active.

When it happens

Trigger: Subscribing to the `scrolledIndexChange` output/event of CdkVirtualScrollViewport when it is configured with the experimental autosize strategy (cdk-virtual-scroll-auto-size / AutoSizeVirtualScrollStrategy) in a development build.

Common situations: Developers tracking the user's scroll position or loading more data on scroll while using the autosize experimental strategy; migrating code that worked with FixedSizeVirtualScrollStrategy or ItemSizeAllStrategy to autosize; using angular/cdk-experimental scrolling in dev mode.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/1ccc0612d611582d. Report an issue: GitHub.