fix(cdk/scrolling): fix scrolling in appendOnly mode (angular#24153)

The rendered content offset is incorrectly set in appendOnly.
It should be set to 0.

Author: chabb

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

@@ -1006,6 +1006,39 @@ describe('CdkVirtualScrollViewport', () => {
 
       expect(viewport.getRenderedRange()).toEqual({start: 0, end: 200});
     }));
+
+    it('rendered offset should always start at 0', fakeAsync(() => {
+      finishInit(fixture);
+      triggerScroll(viewport, testComponent.itemSize + 5);
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.getOffsetToRenderedContentStart())
+        .withContext('should have 0px offset as we are using appendOnly')
+        .toBe(0);
+    }));
+
+    it('should set content offset to bottom of content', fakeAsync(() => {
+      finishInit(fixture);
+      const contentSize = viewport.measureRenderedContentSize();
+
+      expect(contentSize).toBeGreaterThan(0);
+
+      viewport.setRenderedContentOffset(contentSize + 10, 'to-end');
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.getOffsetToRenderedContentStart()).toBe(0);
+    }));
+
+    it('should set content offset to top of content', fakeAsync(() => {
+      finishInit(fixture);
+      viewport.setRenderedContentOffset(10, 'to-start');
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.getOffsetToRenderedContentStart()).toBe(0);
+    }));
   });
 });
 

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

@@ -321,6 +321,8 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
     const axis = isHorizontal ? 'X' : 'Y';
     const axisDirection = isHorizontal && isRtl ? -1 : 1;
     let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;
+    // in appendOnly, we always start from the top
+    offset = this.appendOnly && to === 'to-start' ? 0 : offset;
     this._renderedContentOffset = offset;
     if (to === 'to-end') {
       transform += ` translate${axis}(-100%)`;