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

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

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%)`;