滚动到动态 angular 页面的正确方法

Question

我正在寻找正确的方法来更正在将加载动态信息的页面中滚动。这些信息是异步的，因此为了避免我的用户看到整个页面自行构建，我有一个布尔标志，如下所示：

<div *ngIf="loaded"> ... </div>

我的问题是我想使用 angular 路由器滚动到一个锚点，但该锚点目前还不存在，因为加载尚未完成。

主播：

<hr id="my_anchor">

我用来加载页面并到达该锚点的代码：

<a [routerLink]="['/some/route/', idParameter]" fragment="my_anchor">...</a>

Answer 1

您可能想要使用虚拟滚动，可通过 Angular CDK 获得：

https://material.angular.io/cdk/scrolling/examples

https://medium.com/codetobe/learn-how-to-us-virtual-scrolling-in-angular-7-51158dcacbd4

这种方法只动态加载屏幕上的那些组件，允许您加载非常大的数据集。

也可以使用手动编码：

const el: any = document.elementFromPoint(x, y);

此 Javascript 函数确定哪个 HTML 元素位于特定的 x、y 坐标，从而确定哪些元素在屏幕上。使用此信息，您可以将所有项目包装在一个列表中，如下所示：

<ng-container *ngFor="let data of datas">
  <ng-container *ngIf="data.isOnScreen">
    <app-my-component></app-my-component>
  </ng-container>
  <ng-container *ngIf="!data.isOnScreen">
    <div class="empty-div">&nbsp;</div>
  </ng-container>
</ng-container>

并将 empty-div 设置为与非空 div 相同的大小。这确保滚动有效。我让这个工作得很好。然而，毫无疑问，CDK 使整个世界变得更加顺畅和轻松。

我的自定义方法的唯一好处是它可以让您完全控制。您可以轻松使用：

list.scrollTop = 999;

滚动到列表中的任何位置，从而支持锚点（其中列表是将滚动的 HTML 列表元素）。不适合胆小的人，只推荐给自信的编码员。

滚动到动态 angular 页面的正确方法

Correct way to scroll to dynamic angular page

html

angular-ui-router

angular