无法使元素的位置粘在垫子抽屉容器中

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

Answer 1

在您的示例中，模板中使用的 class 名称与样式不匹配。更正后，您会看到 overflow: scroll 在容器中意外地给出了两个滚动条。

mat-drawer-container 和 mat-drawer-content class 中 overflow 属性 的默认值为 hidden。当 overflow: hidden 设置为粘性元素的任何祖先时，祖先元素将成为滚动容器。为了避免这种情况，只需 unset overflow 属性.

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

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

div 现在将是 sticky。