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

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

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

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

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

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


scroll angular angular-material mat-sidenav fixed
person tgordon18    schedule 07.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В 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

person uminder    schedule 10.11.2019
comment
Пожалуйста, прочтите вопрос более внимательно: I would like to avoid simply adding pointer-events: none to the fixed element because there will be interactive functionality on it eventually - person tgordon18; 12.11.2019
comment
Извините, что не внимательно прочитал ваш вопрос. Я отредактировал свой ответ и, надеюсь, предложу более точное решение. - person uminder; 12.11.2019