展开时将面板滚动到屏幕顶部

Question

我有以下示例。当我展开面板时，它下面的其余项目会下降，以为打开的面板的内容腾出空间。

但是，我需要的是，当我扩展面板时，它应该向上滚动，以便打开面板的标题位于顶部。原因是，我正计划使内容高度占据屏幕上尽可能多的高度，以使打开的面板几乎占据屏幕的大部分。

Answer 1

对于Angular Material Component's Expansion Panel，
您可以使用以下css来使扩展的扩展面板首先显示，
即扩展的扩展面板将移至列表中的第一个位置。

--------- styles.css ---------。

.mat-expansion-panel,
.mat-accordion {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel.mat-expanded {
  order: -1;
}

方法：

• 赋予.mat-accordion，display: flex并操纵order的{​​{1}}属性以实现目标。

Stackblitz- Demo showing expaned panel moving to top in the list