Невозможно сделать позицию элемента липкой в ​​контейнере с выдвижным ящиком

Question

У меня проблема с div, использующим position: sticky; внутри mat-drawer-container. Вот что я попробовал:

.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 нежелательно дает две полосы прокрутки в контейнере.

Значение по умолчанию для свойства overflow в классах mat-drawer-container и mat-drawer-content равно 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.