Css Chrome-在将元素添加到*ngFor view时始终向下滚动到最后一个元素

我有一个简单的视频列表页面。在页面底部我有一个按钮“加载更多”。若用户点击那个按钮，我会发出http请求并将数据添加到现有的视频数组中

简化的代码如下所示：

组成部分：

export class AppComponent implements OnInit {
  public videoList = [];

  constructor(private appService: AppService) {}

  public ngOnInit(): void {
    this.loadVides();
  }

  public loadMore(): void {
    this.loadVides();
  }

  private loadVides(): void {
    this.appService.loadVideos().subscribe((videos) => {
      this.videoList = [...this.videoList, ...videos];
      console.log('Data was loaded');
    })
  }

}

模板：

<div *ngFor="let video of videoList">
  <div style="height: 100px;">{{video.name}}</div>
</div>  


<div class="d-flex justify-content-center mt-2 mb-4">
  <button class="btn btn-outline-danger btn-lg" (click)="loadMore()">Load more...</button>
</div>

{{video.name}
加载更多。。。

问题是什么：

在firefox页面上，加载更多项目后不会滚动页面，因此我看到了第一个新项目。在chrome上，页面被滚动到最后，所以我再次看到最后一个新项目和“加载更多”按钮

演示：

---

您可能会模糊按钮，因此chrome不会尝试稳定滚动位置

<button class="btn btn-outline-danger btn-lg" #btn (click)="btn.blur(); loadMore()">Load more...</button>

加载更多。。。

您可以添加

溢出锚点：none

如下所示：-

<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>

{{video.name}
加载更多。。。

溢出锚定属性允许我们选择退出滚动锚定，这是一种浏览器功能，旨在允许内容加载到用户当前DOM位置上方，而无需在内容完全加载后更改用户位置

我参考了这个答案-