Question

我正在构建一个基本的Angular应用程序，当我转到服务页面并向下滚动并返回到首页时，从主页上有一些组件，滚动条设置为页面底部。

每次打开组件时，我都希望将滚动条设置为顶部。

由于我使用的是angular7，所以我尝试使用路由器中提供的选项，

{scrollPositionRestoration : 'enabled'}

然后

{scrollPositionRestoration : 'top'}，

，但在Chrome，Chrome移动版或Edge上均无法使用。

除此之外，我尝试在路由器上设置监听器并使用 window.scrollTop(0,0)，这也不起作用，也没有使用document变量。

我只希望滚动条位于顶部。这太天真了，但现在让我感到沮丧。

Answer 1

scrollPositionRestoration也不适合我。我通过不使用Angular Material的“ mat-drawer”组件和“ scrollPositionRestoration：'enabled'”来解决它。不幸的是，“ mat-drawer-content”的滚动位置无法恢复到其先前的滚动状态。如果您不使用Angular Material，则可能是另一个组件的故障。

如果您想使用“ mat-drawer”滚动到顶部，请使用以下方法：

// Navigate to the given route
public navigate (route: string): void {
    this.router.navigateByUrl(route)
    document.getElementsByTagName('mat-drawer-content')[0].scrollTo(0, 0)
}

Answer 2

由于 MatSideNavContent 扩展了扩展 CdkScrollable 的 MatDrawerContent，你可以在你的组件中得到它：

@ViewChild('sidenavContent', {read: MatSidenavContent}) sidenavContentScrollable: MatSidenavContent;

如果需要，您可以通过 CdkScrollable API 设置滚动位置，例如：

if (this.sidenavContentScrollable) {
   this.sidenavContentScrollable.scrollTo({top: 0});
}

Answer 3

谢谢你。在我的情况下，我必须将滚动应用于“ mat-drawer-content”。就像魅力一样。

fridoo的答案。

Maybe scrolling doesn't happen on the window but on some other element. You have to figure out what the scrollable container in your case is. e.g. I use a MatSidenav where scrolling happens on the mat-sidenav-content and use document.getElementsByTagName('mat-sidenav-content')[0].scrollTo(0, 0) to scroll to the top on router events.

Answer 4

在我的情况下，window.scrollTo(0, 0) 技巧不起作用，因为我实际上需要滚动到溢出的路由器出口的顶部。如果您有类似的问题，这就是我所做的解决方法：

@Component({
    template: '<router-outlet (activate)="onActivate($event, outlet)" #outlet></router-outlet>',
})
export class MyParentComponent {
    onActivate(e, outlet) {
        outlet.scrollTop = 0;
    }
}

更改路线后滚动到顶部，并且新组件负载不起作用

4 个答案: