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

Posted 2023-02-18

【中文标题】修复了 mat-sidenav-content 中的元素

【英文标题】：Fixed element inside mat-sidenav-content

【发布时间】：2020-03-04 10:54:23

【问题描述】：

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

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

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

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

this SO post 中讨论的解决方案似乎相关，但我无法在这里成功实施。

【参考方案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

【讨论】：

请仔细阅读问题：I would like to avoid simply adding pointer-events: none to the fixed element because there will be interactive functionality on it eventually

很抱歉没有仔细阅读您的问题。我编辑了我的答案并提供了一个希望更准确的解决方案。