mat-sidenav-content

Question

我希望在mat-sidenav-content内有一个固定元素，同时当鼠标悬停在固定元素上时，仍然允许用户滚动其后面的内容。

这是一个令人眼花bl乱的例子：https://stackblitz.com/edit/angular-khterh?file=src%2Fapp%2Fapp.component.html

请注意，当光标位于div的列表上方时，它们将按预期方式滚动，但是如果光标位于固定元素上，则无法滚动。

我想避免简单地将pointer-events: none添加到固定元素，因为最终将具有交互式功能。左侧导航栏应留在原处。

this SO post中讨论的解决方案似乎很相关，但是我无法在此处成功实现。

Answer 1

在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