angular - 实现带角度的自动动画滚动

Question

我是角度的新手，我面临一个到目前为止我无法解决的问题。我有一个由页眉、页脚和包含名称列表的主窗口组成的应用程序（见图）。

该列表可以是可变长度，但我希望列数（8）是固定的。基于此，我想添加一个自动动画滚动功能，以给定（低）速度从上到下显示列表，以防名称数量触发大于一个屏幕的列表。以下是与包含名称列表的容器相对应的文件。

人.component.html

<div class="persons-container">
    <app-person [person]="person" *ngFor="let person of persons"></app-person>
</div>

人员.component.scss

.persons-container {
  max-height: calc(100vh - 113px);
  overflow: scroll;
  scroll-behavior: smooth;
  display: grid;
  grid-template-columns: repeat(8,1fr);
}

个人组件.ts

import { Component, Input, OnInit } from '@angular/core';

import { Person } from '../../Person'

@Component({
  selector: 'app-persons',
  templateUrl: './persons.component.html',
  styleUrls: ['./persons.component.scss']
})
export class PersonsComponent implements OnInit {

  @Input() persons: Person[] = [];

  constructor() {}

  ngOnInit(): void {
  }
}

你能给我一些提示或代码片段来实现这一点吗？我真的被困住了。

标签： angular