时间戳

首页 > 解决方案 > 如何使 scrollIntoView() 在第一次单击时工作（Angular 6）？

javascript - 如何使 scrollIntoView() 在第一次单击时工作（Angular 6）？

问题描述

以前对类似 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。

标签： javascripthtmlnode.jsangulartypescript

解决方案

试试这个 ：

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

推荐阅读