使用angular-cdk创建叠加层中的垂直滚动

Question

我已经使用了cdk的Overlay来显示点击按钮时的一些内容。除垂直滚动机制外，一切都按预期工作。

当我缩小浏览器的高度时，叠加层内的内容会获得垂直滚动条。同时max-height: 600px和height: 600px同时提供panelClass和内容。但仍然是同样的行为。

试图查看角度材质对话框代码，但无法理解如何实现滚动。

由于Overlay.scrollStrategies缺乏明确的文件，我不清楚如果我必须朝这个方向看。

以下是代码摘录，我用它来制作叠加层。

.help-menu-overlay-panel-class {
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;
    max-height: 600px;
    height: 600px;
}

.help-overlay-container {
   overflow-y: auto;
   height: 600px;
}



<button [helpMenuOverlayTrigger]="helpMenuOverlayTemplate"></button>


<ng-template #helpMenuOverlayTemplate>
    <div class="help-overlay-container">
        ...
    </div>
</ng-template>



const overlayConfig: OverlayConfig = new OverlayConfig(<OverlayConfig>{
        hasBackdrop: true,
        direction: this.dir.value,
        backdropClass: 'cdk-overlay-dark-backdrop',
        maxHeight: '600px',
        maxWidth: '400px',
        panelClass: ['help-menu-overlay-panel-class']
    });

overlayConfig.positionStrategy = this.overlay
    .position()
    .connectedTo(
        this.elementRef,
        {
            originX: 'start',
            originY: 'bottom'
        },
        {
            overlayX: 'start',
            overlayY: 'top'
        }
    )
    .withOffsetY(10)
    .withOffsetX(-4)
    .withDirection(this.dir.value);

// overlayConfig.scrollStrategy = this.overlay.scrollStrategies.reposition();

this._overlayRef = this.overlay.create(overlayConfig);

this._overlayRef.backdropClick().subscribe(
    () => {
        this._overlayRef.detach();
    }
);