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

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

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

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

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

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

div 现在将是sticky。