Поведение Material Design (аналогично Android) в веб-приложении

Сценарий

У нас есть mat-toolbar и mat-tab-group - поведение, которое нам нужно, похоже на GIF ниже, т.е. когда мы прокручиваем вниз, mat-tab-group (Кошки в GIF ниже) можно прокручивать, а mat-toolbar (Домашние животные в GIF ниже) прячется, только чтобы показать вверх снова после того, как мы прокрутим назад.

Код

Подходы, которые я пробовал:

1. Пытался использовать событие прокрутки, но не смог определить, была ли прокрутка вверх или вниз, потому что числа offsetHeight и offsetTop не изменились. offsetTop и offsetHeight меняются при прокрутке всего окна, значения не изменились с нашей прокруткой, которая находится внутри mat-tab-group.
2. Пробовал наблюдать за прокруткой мыши, которая работает на всей странице, но перестает захватывать прокрутку внутри нашего mat-list

Вопрос:

• Как захватить свиток внутри mat-tab-group?
• Если это не правильный способ достижения этого, ищите руководство по правильному подходу.
• GIF взят из Стандарт дизайна материалов