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

Сценарий

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

Код

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

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

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

Вопрос:

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

Я отправил ответ по адресу: stackoverflow.com/a/61561048/1135971.

andreivictor 02.05.2020 16:40

отлично сделано @andreivictor - если вы ссылаетесь на этот ответ как на ответ здесь, я был бы рад отметить его как принятый

Akber Iqbal 03.05.2020 08:27

Спасибо! Я не знаю, является ли публикация ответа, который ссылается на мой собственный ответ, хорошей практикой для SO. Я бы предпочел не публиковать это. Другой вопрос связан с этим, и я думаю, что люди легко найдут его.

andreivictor 04.05.2020 16:25
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
3
112
0

Другие вопросы по теме