如何在Angular中添加滚动条？

Question

我有一个对话框，我在列的左侧添加了扩展面板，但是当我展开最后一个标题 3 时，出于某种原因，该项目的第 3 项丢失/位于左列下方，所以我正在尝试找到一种添加滚动条的方法，以便在展开所有内容时会显示滚动条，但我不确定如何执行此操作，因此非常感谢任何建议或帮助。

我也在尝试让扩展面板变得不那么明显和更透明，如果我也能得到任何关于如何做到这一点的建议，那就太棒了。

<div mat-dialog-content class="dialog-container">
    <div class="container-inside-dialog">
        <div class="row">
            <div class="column left">
                <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 1
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
                  
                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 2
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
                  
                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 3
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
            </div>
            <div class="column right">
                <h2>What is </h2>
                <p>Some text..</p>
            </div>
        </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="center start">
        <span style="flex-grow: 1;"></span>
        <button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
            matTooltip="Close Help">Close</button>
    </div>
</div>

This is what it look like when I expand right now (pic) 这是stackblit链接https://stackblitz.com/edit/mat-expansion-panel-bn9uwv 谢谢

Answer 1

试试这个：https://www.w3schools.com/cssref/css3_pr_overflow-y.asp, 并在您的 css 中使用 overflow-y: auto 作为 .left 选择器。

如果您不喜欢默认视图，这将有助于调整滚动条：https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp