固定了垫子侧导航内容内的元素

Question

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

下面是一个stackblitz示例：https://stackblitz.com/edit/angular-khterh?file=src%2Fapp%2Fapp.component.html

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

我希望避免简单地将pointer-events: none添加到固定元素中，因为它最终会有交互功能。左侧导航应该保持原样。

在这篇SO文章中讨论的解决方案似乎很相关，但我未能在这里成功实施它们。

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();
}

堆叠闪电