Фиксированный элемент внутри mat-sidenav-content - PullRequest
Новая
       72

Фиксированный элемент внутри mat-sidenav-content

2 голосов
/ 07 ноября 2019

Я хотел бы иметь фиксированный элемент внутри mat-sidenav-content, но при этом пользователь мог бы прокручивать содержимое позади него, когда его мышь находится над фиксированным элементом.

Вот пример стекаблика: https://stackblitz.com/edit/angular-khterh?file=src%2Fapp%2Fapp.component.html

Обратите внимание, что когда ваш курсор находится над списком div s, они прокручиваются, как и ожидалось, но если ваш курсор проходит над фиксированным элементом, вы не можете прокручивать.

Я хотел быизбегайте простого добавления pointer-events: none к фиксированному элементу, потому что в конечном итоге на нем появятся интерактивные функции. Левый сиденав должен оставаться там, где он есть.

Решения, обсуждаемые в этой публикации SO , кажутся актуальными, но я не смог их успешно реализовать здесь.

1 Ответ

0 голосов
/ 10 ноября 2019

В template добавьте (wheel) к фиксированному элементу следующим образом. 

<div class="inner-sidenav" (wheel)="onWheel($event)">...</div>

В классе component добавьте соответствующую функцию onWheel. 

onWheel(event: WheelEvent): void {
    (<Element>event.target).parentElement.scrollTop += event.deltaY;
    event.preventDefault();
}

Stackblitz

...