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

Question

我在div使用position: sticky;inside时遇到问题mat-drawer-container。这是我尝试过的：

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

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

没有运气:(

有什么想法吗？

这不起作用

这有效（期望的结果）

score 2 · Accepted Answer

在您的示例中，模板和样式中使用的类名不匹配。更正后，您将看到overflow: scroll容器内出现了不受欢迎的两个滚动条。

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

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

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

现在div将是sticky。

1 回答 1