angular/components · error · Error

CDK virtual scroll: maxBufferPx must be greater than or equa

Error message

CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx

What it means

AutoSizeVirtualScrollStrategy.updateBufferSize validates that maxBufferPx (extra rendered content beyond the viewport) is greater than or equal to minBufferPx (the minimum rendered buffer before new items are fetched). Passing a max smaller than min would produce contradictory buffering behavior, so it throws immediately. Note the arguments are (minBufferPx, maxBufferPx) in that order.

Source

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

  scrollToIndex(): void {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      // TODO(mmalerba): Implement.
      throw Error(
        'cdk-virtual-scroll: scrollToIndex is currently not supported for the autosize' +
          ' scroll strategy',
      );
    }
  }

  /**
   * Update the buffer parameters.
   * @param minBufferPx The minimum amount of buffer rendered beyond the viewport (in pixels).
   * @param maxBufferPx The number of buffer items to render beyond the edge of the viewport (in
   *     pixels).
   */
  updateBufferSize(minBufferPx: number, maxBufferPx: number) {
    if (maxBufferPx < minBufferPx) {
      throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');
    }
    this._minBufferPx = minBufferPx;
    this._maxBufferPx = maxBufferPx;
  }

  /** Update the rendered content after the user scrolls. */
  private _updateRenderedContentAfterScroll() {
    const viewport = this._viewport!;

    // The current scroll offset.
    const scrollOffset = viewport.measureScrollOffset();
    // The delta between the current scroll offset and the previously recorded scroll offset.
    let scrollDelta = scrollOffset - this._lastScrollOffset;
    // The magnitude of the scroll delta.
    let scrollMagnitude = Math.abs(scrollDelta);

    // The currently rendered range.
    const renderedRange = viewport.getRenderedRange();

View on GitHub (pinned to 0411926e7d)

Solutions

Ensure maxBufferPx >= minBufferPx: e.g. updateBufferSize(100, 200).
Swap the arguments if you accidentally passed them in reverse order.
Add a guard where buffers are computed: const min = x, max = Math.max(x, y) before calling updateBufferSize.

Example fix

// before
strategy.updateBufferSize(500, 200); // max < min -> throws
// after
strategy.updateBufferSize(200, 500);

Defensive patterns

Strategy: validation

Validate before calling

function safeUpdateBufferSize(s: AutoSizeVirtualScrollStrategy, min: number, max: number) {
  if (min < 0 || max < min) throw new RangeError('maxBufferPx must be >= minBufferPx');
  s.updateBufferSize(min, max);
}

Try / catch

try {
  strategy.updateBufferSize(minBufferPx, maxBufferPx);
} catch (e) {
  strategy.updateBufferSize(minBufferPx, Math.max(minBufferPx, maxBufferPx));
}

Prevention

Remember the signature order: updateBufferSize(minBufferPx, maxBufferPx).
Normalize computed buffers: max = Math.max(min, max) before calling.
Add unit tests around buffer configuration values.

When it happens

Trigger: Calling updateBufferSize(min, max) — or binding the cdkVirtualScrollMinBufferPx/cdkVirtualScrollMaxBufferPx inputs to values where maxBufferPx < minBufferPx — on a viewport using the autosize strategy.

Common situations: Swapped input values (max bound before min by mistake); computing buffer sizes dynamically and getting an inverted pair; copying config between strategies with different parameter order.

Related errors

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