I have a table rendered using angular material virtual scroll.
this.trs = [ ...batch, ...this.trs];
setTimeout(() => this.viewPort.scrollToIndex(100), 1000);
I get the data and populated the virtual scroll and then set the scrollToIndex to 100. and the 100th row shows up on the screen.
The problem here is that there is jumping, initially when the scroll loads it loads the 1st row and then jumps to the 100th row. Is there a way to default it to the 100th row. So that it shows up directly without jumping.
More insight into the problem,
This is a bidirectional scroll, when the scrollbar hits the top it calls API and get new values and append on top of the array and then it hits bottom appends data to the bottom.
The logic works well when the data is appended at the bottom, but it scrollbar jumps every time the data is appended on top.
OR https://stackblitz.com/edit/angular-4cwieu?file=src%2Fapp%2Fapp.component.ts
Is it possible to scroll to a particular index without that settimeout?