fix(cdk/scrolling): scrollToIndex combined with cdkVirtualScrollingEement can result in wrong scroll offset

Fixes a bug when using cdkVirtualScrollingElement and there is some space between the scrolling element and the viewport the scroll to index function doesn't take into account the viewport offset from the scrolling container.

Fixes #33063

Author: Harpush

goldens/cdk/scrolling/index.api.md

@@ -202,7 +202,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     scrollable: CdkVirtualScrollable;
     readonly scrolledIndexChange: Observable<number>;
     scrollToIndex(index: number, behavior?: ScrollBehavior): void;
-    scrollToOffset(offset: number, behavior?: ScrollBehavior): void;
+    scrollToOffset(offset: number, behavior?: ScrollBehavior, relativeTo?: 'viewport' | 'scrollingContainer'): void;
     setRenderedContentOffset(offset: number, to?: 'to-start' | 'to-end'): void;
     setRenderedRange(range: ListRange): void;
     setTotalContentSize(size: number): void;

src/cdk/scrolling/fixed-size-virtual-scroll.ts

@@ -104,7 +104,7 @@ export class FixedSizeVirtualScrollStrategy implements VirtualScrollStrategy {
    */
   scrollToIndex(index: number, behavior: ScrollBehavior): void {
     if (this._viewport) {
-      this._viewport.scrollToOffset(index * this._itemSize, behavior);
+      this._viewport.scrollToOffset(index * this._itemSize, behavior, 'viewport');
     }
   }
 

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -1081,16 +1081,27 @@ describe('CdkVirtualScrollViewport', () => {
         .toBe(50);
     }));
 
-    it('should measure scroll offset with custom scrolling element', fakeAsync(() => {
+    it('should scroll to offset relative to scrolling container', fakeAsync(() => {
       finishInit(fixture);
-      triggerScroll(viewport, 100);
+      triggerScroll(viewport, 100, 'scrollingContainer');
       fixture.detectChanges();
       flush();
 
       expect(viewport.measureScrollOffset('top'))
-        .withContext('should be 50 (actual scroll offset - viewport offset)')
+        .withContext('should be 50 (scrolling container offset)')
         .toBe(50);
     }));
+
+    it('should scroll to offset relative to viewport', fakeAsync(() => {
+      finishInit(fixture);
+      triggerScroll(viewport, 100, 'viewport');
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.measureScrollOffset('top'))
+        .withContext('should be 100 (viewport offset)')
+        .toBe(100);
+    }));
   });
 
   describe('with scrollable window', () => {
@@ -1143,9 +1154,13 @@ function finishInit(fixture: ComponentFixture<any>) {
 }
 
 /** Trigger a scroll event on the viewport (optionally setting a new scroll offset). */
-function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
+function triggerScroll(
+  viewport: CdkVirtualScrollViewport,
+  offset?: number,
+  relativeTo?: 'viewport' | 'scrollingContainer',
+) {
   if (offset !== undefined) {
-    viewport.scrollToOffset(offset);
+    viewport.scrollToOffset(offset, 'auto', relativeTo);
   }
   dispatchFakeEvent(viewport.scrollable!.getElementRef().nativeElement, 'scroll');
   tick(16); // flush animation frame

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -411,13 +411,28 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
    * direction, this would be the equivalent of setting a fictional `scrollRight` property.
    * @param offset The offset to scroll to.
    * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
+   * @param relativeTo The start point of the offset. Default is `scrollingContainer`.
    */
-  scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto') {
+  scrollToOffset(
+    offset: number,
+    behavior: ScrollBehavior = 'auto',
+    relativeTo: 'viewport' | 'scrollingContainer' = 'scrollingContainer',
+  ) {
     const options: ExtendedScrollToOptions = {behavior};
     if (this.orientation === 'horizontal') {
-      options.start = offset;
+      if (relativeTo === 'scrollingContainer') {
+        options.start = offset;
+      } else {
+        const viewportOffset = this.measureViewportOffset('start');
+        options.start = viewportOffset + offset;
+      }
     } else {
-      options.top = offset;
+      if (relativeTo === 'scrollingContainer') {
+        options.top = offset;
+      } else {
+        const viewportOffset = this.measureViewportOffset('top');
+        options.top = viewportOffset + offset;
+      }
     }
     this.scrollable.scrollTo(options);
   }