以前针对类似StackOverflow问题的解决方案集中在Jquery上,而找不到针对angular 6 / Javascript的可能解决方案。

当前,我正在使用scrollIntoView(),其行为可以平滑地滚动到使用路由器出口滚动到动态创建的div,但是它仅在第二次单击后才滚动,我的代码是否有问题或是否可以在第一次单击中实现? ?

HTML:

<div>
  <mat-card-title (click)="articleNavigation(documents._id)">{{documents.title}}</mat-card-title>
</div>
<div #test style="width:50%; margin-left: auto; margin-right: auto;">
  <router-outlet></router-outlet>
</div>


ts:

articleNavigation(documentId) {
 this.router.navigate(['./document' , documentId], { relativeTo: this.route });
 this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
}


如果我使用行为自动而不是平滑操作,则可以在第一次单击时使用,但是首选平滑过渡。我认为可能的原因之一是在第一次单击时创建了div,然后在第二次单击时将scrollIntoView()转换为div。

最佳答案

尝试这个 :

setTimeout(() => {
    this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
});

09-11 19:11
查看更多