angular - 修复了 mat-sidenav-content 中的元素

Question

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

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

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

我想避免简单地添加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();
}

堆栈闪电战