Angular CDK Virtual Scroll - 项目在底部被截断

Question

当我滚动到滚动查看器的底部时，最后几项被截掉了。

我正在使用实验性 cdk 并使用 autoSize。

<section id="main"
    class="section p-0">
    <div class="container">
        <ng-container *ngIf='allShows | async as data'>
            <cdk-virtual-scroll-viewport autosize
                [ngStyle]="{'height': 'calc(75vh)'}"
                class="scroll-viewport pb-2">
                <div *cdkVirtualFor='let row of data; let idx = index;  templateCacheSize:0'
                    class="columns is-multiline px-1">
                    <app-show-card class="column is-4"
                        *ngFor='let item of row'
                        [show]=item></app-show-card>
                </div>
            </cdk-virtual-scroll-viewport>
        </ng-container>
    </div>
</section>

网站已上线； https://lucid-thompson-158d2d.netlify.app/

堆栈闪电战； https://stackblitz.com/github/weirdyang/movie-therapy-angular（请注意，由于 scss 导入，它似乎不起作用）；

我做错了什么？

Answer 1

设法通过分块数组然后将 [itemSize] 设置为项目行高或使用自动调整大小属性来解决此问题。

Angular CDK Virtual Scroll - 项目在底部被截断

Angular CDK Virtual Scroll - Items cut off at the bottom

angular

angular-cdk

angular-cdk-virtual-scroll