Skip to content

Commit

Permalink
fix(cdk/scrolling): fix scrolling in appendOnly mode (#24153)
Browse files Browse the repository at this point in the history
The rendered content offset is incorrectly set in appendOnly.
It should be set to 0.

(cherry picked from commit 5221b79)
  • Loading branch information
chabb authored and zarend committed Feb 7, 2022
1 parent a764e6a commit 4b6e832
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 0 deletions.
33 changes: 33 additions & 0 deletions src/cdk/scrolling/virtual-scroll-viewport.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}));
});
});

Expand Down
2 changes: 2 additions & 0 deletions src/cdk/scrolling/virtual-scroll-viewport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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%)`;
Expand Down

0 comments on commit 4b6e832

Please sign in to comment.