4

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

当我降低浏览器的高度时，覆盖层内的内容会获得垂直滚动条。Given max-height: 600pxand height: 600pxto both panelClassand content too。但仍然是相同的行为。

试图查看 angular-material 对话框代码，但无法理解如何实现滚动。

由于缺乏明确的文件，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();
    }
);
4

0 回答 0