Chrome - On adding elements to *ngFor view always scroll down to last element
You can add the overflow-anchor:none like so:-
<div *ngFor="let video of videoList"> <div style="height: 100px;">{{video.name}}</div></div> <div style="overflow-anchor:none" class="d-flex justify-content-center mt-2 mb-4"> <button class="btn btn-outline-danger btn-lg" (click)="loadMore()">Load more...</button></div>The overflow-anchor property enables us to opt out of Scroll Anchoring, which is a browser feature intended to allow content to load above the user’s current DOM location without changing the user’s location once that content has been fully loaded.
I referred this for the answer - https://css-tricks.com/almanac/properties/o/overflow-anchor/
you could blur your button, so chrome won't try to stabilize the scroll position
<button class="btn btn-outline-danger btn-lg" #btn (click)="btn.blur(); loadMore()">Load more...</button>