Вертикальная прокрутка в создании оверлея с помощью angular-cdk - PullRequest
Новая
       29

Вертикальная прокрутка в создании оверлея с помощью angular-cdk

0 голосов
/ 26 апреля 2018

Я использовал Overlay cdk, чтобы показать некоторый контент при нажатии кнопки. Все работает как положено, кроме механизма вертикальной прокрутки.

Контент внутри оверлея получает вертикальную полосу прокрутки, когда я уменьшаю высоту браузера. Дано 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();
    }
);
...