2

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.

Bohr Hew
  • 188
  • 13
tgordon18
  • 1,562
  • 1
  • 19
  • 31

1 Answers1

0

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

uminder
  • 23,831
  • 5
  • 37
  • 72
  • Please read the question more carefully: `I would like to avoid simply adding pointer-events: none to the fixed element because there will be interactive functionality on it eventually` – tgordon18 Nov 12 '19 at 13:21
  • Sorry for not carefully reading your question. I edited my answer and provide a hopefully more accurate solution. – uminder Nov 12 '19 at 15:18