无法使元素在mat-drawer-container中的位置固定

Question

我在mat-drawer-container内使用 position: sticky; 的div时遇到了问题。以下是我的尝试：

.mat-drawer-container.my-drawer-container {
    overflow: scroll;
}

.mat-drawer-content.my-drawer-content {
    overflow: scroll;
}

没有成功 :(

有什么想法吗？

这个不起作用 https://stackblitz.com/edit/angular-aqk1oj-pg4xq8 这个可以工作（期望的结果） https://stackblitz.com/edit/angular-aqk1oj

- Whisher

Answer 1

在您的示例中，模板和样式中使用的类名不匹配。一旦进行了更正，您会发现overflow: scroll在容器内产生了两个不必要的滚动条。 mat-drawer-container和mat-drawer-content类的overflow属性的默认值为hidden。当将overflow: hidden设置为粘性元素的任何祖先时，祖先元素将成为滚动容器。要避免这种情况，只需将overflow属性设置为unset即可。

.mat-drawer-container.my-mat-drawer-container {
    overflow: unset;
}

.mat-drawer-content.my-mat-drawer-content {
    overflow: unset;
}

现在将变为粘性的。

- nash11