Web应用程序上的材料设计（类似于Android）行为

Question

场景

我们有一个mat-toolbar和一个mat-tab-group-我们需要的行为类似于下面的GIF，即当我们向下滚动时，mat-tab-group（下面的gif中的猫）是可滚动的， mat-toolbar（下面的gif中的宠物）隐藏起来，只在我们向上滚动后再次显示。

The code

我尝试的方法：

1. 试图使用滚动事件，但是由于offsetHeight和offsetTop的数字没有变化，因此无法确定滚动是向上还是向下。当整个窗口滚动时，offsetTop和offsetHeight会发生变化，而mat-tab-group内部的滚动不会改变值。
2. 对鼠标滚动进行了观察，该滚动在整个页面上都有效，但停止捕获mat-list中的滚动

问题：

• 如何捕获mat-tab-group内部的滚动？
• 如果这不是实现此目标的正确方法，请寻找正确方法的指导
• GIF来自Material Design standard