当cdk-virtual-scroll-viewport填充其余高度时，如何使工具栏始终位于顶部？

Question

我有一个页面，其中包含mat-toolbar和cdk-virtual-scroll-viewport。我想始终将mat-toolbar留在屏幕顶部，而cdk-virtual-scroll-viewport填满屏幕的其余部分。

我尝试将cdk-virtual-scroll-viewport的高度设置为100vh，但是，当我到达列表的末尾时，工具栏消失了。

这是我准备的示例代码：https://stackblitz.com/edit/angular-lbxmce

正如您所看到的，一旦我们滚动到底部的末尾，我们需要向后滚动到第一项，以使工具栏再次出现。如何在保持列表填充屏幕其余部分的同时固定工具栏的位置？

谢谢。

Answer 1

最佳做法是为页面实现布局，并将mat-toolbar添加到布局中。

这是一个示例：

...

const routes: Routes = [
 {
   path: 'test',
   component: TestLayoutComponent,
   children: [
     { path: '', component: TestComponent },
   ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule]
})
export class TestRoutingModule { }

Read more

Answer 2

您需要了解工具栏的height，然后才能计算视口的高度：

.example-viewport {
  height: calc(100vh - 64px);
  margin: 4px;
}