Fixed element inside mat-sidenav-content

2
votes

I would like to have a fixed element inside of mat-sidenav-content while still allowing the user to scroll the content behind it when their mouse is over the fixed element.

Here is a stackblitz example: https://stackblitz.com/edit/angular-khterh?file=src%2Fapp%2Fapp.component.html

Notice that when your cursor is over the list of divs, they scroll as expected, but if your cursor goes over the fixed element you cannot scroll.

I would like to avoid simply adding pointer-events: none to the fixed element because there will be interactive functionality on it eventually. The left sidenav should stay where it is.

The solutions discussed in this SO post seem relevant but I have not been able to implement them successfully here.

1
angularscrollangular-materialfixedmat-sidenav

1 Answers

0
votes

In the template, add (wheel) to your fixed element as follows.

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

In the component class, add corresponding onWheel function.

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

Stackblitz