Scrollbar jumping in CdkVirtualScrollViewport with variable item sizes

Synchronizing Variable Item Sizes in CDK Virtual Scroll

To prevent scrollbar jumping in CdkVirtualScrollViewport when items have variable heights, you must replace the default fixed-size strategy with a dynamic sizing approach and manually trigger viewport recalculations when content changes.

The Recommended Approach

The jumping occurs because the viewport calculates the total scrollable area based on an estimated average height. When a real item is rendered and its actual height differs from the estimate, the viewport adjusts the total height and the current offset, causing the "jump."

To synchronize the DataSource and the viewport, follow these steps:

1. Implement a Dynamic Sizing Strategy: Instead of providing a static number to the itemSize property, ensure your strategy can handle variable heights. While the standard FixedSizeVirtualScrollStrategy is the default, variable sizes typically require a custom strategy or a strategy that allows for size updates.
2. Notify the Viewport of Size Changes: The viewport does not automatically observe DOM changes inside rendered items. When an item's size changes (e.g., due to an image loading or an accordion expanding), you must explicitly call the checkViewportSize() method on the CdkVirtualScrollViewport instance.
3. Use a ResizeObserver: For items with truly dynamic content, attach a ResizeObserver to the rendered elements. When a resize is detected, trigger the viewport update.

Implementation Example

// In your component.ts
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

updateItemSize() {
  // Forces the viewport to recalculate the total scrollable area 
  // and adjust the offset based on currently rendered items.
  this.viewport.checkViewportSize();
}

Likely Cause vs. Confirmed Behavior

Confirmed: CdkVirtualScrollViewport relies on the sizing strategy to predict the scrollable range. If the rendered height differs from the predicted height, the scrollbar will shift.

Likely: If you are seeing jumps specifically during rapid scrolling, it is likely that your initial size estimates in the DataSource are significantly different from the actual CSS-rendered heights of your components.

Verification and Constraints

To verify the fix, use the browser's Performance tab to monitor Layout Shifts. If checkViewportSize() is called too frequently (e.g., on every pixel of a resize), it may cause layout thrashing. It is recommended to debounce these calls.

Missing Diagnostic: Are the item sizes determined at the time of data fetch, or are they determined by the browser's rendering engine after the component is mounted?