Как добавить что-то в cdk-virtual-scroll-viewport за пределами * cdkVirtualFor = "". Избегая дополнительной полосы прокрутки на странице?

Question

Я могу настроить свой виртуальный порт просмотра прокрутки, используя Angular Материал. У меня есть это загрузка новых данных, когда я прокручиваю вниз. Но я хотел бы добавить раздел в самом верху списка. Я не хочу, чтобы это было заклеено. Просто наверху?

Я изучил основную полосу прокрутки windows, но эта проблема так и не была решена.

https://github.com/angular/components/issues/13862

Вот код, который я пытаюсь использовать.

Все это работает, пока я не добавлю div с классом create-comment-section. Так что только с nz-картой все в порядке. Я не хочу перемещать секцию создания постов за ее пределы, так как тогда есть две прокрутки windows?

<cdk-virtual-scroll-viewport
itemSize="200"
(scrolledIndexChange)="
    nextBatch(
        $event,
        (communityService?.wallPosts)[
            communityService?.wallPosts?.length - 1
        ]?.id
    )"
>
<div class="create-comment-section">
    <div class="header-section">
        <span>Create Post</span>
    </div>
    <div class="post-section">
        <textarea
            style="resize: none"
            rows="4"
            nz-input
            placeholder="Describe your experience"
        ></textarea>
    </div>
    <div class="other-options-section">
        <nz-upload>
            <button nz-button>
                <i nz-icon nzType="upload"></i><span>Click to Upload</span>
            </button>
        </nz-upload>
    </div>
</div>
<nz-card
    *cdkVirtualFor="
        let post of communityService?.wallPosts;
        let i = index;
        trackBy: trackByIdx
    "
>
    <nz-card-meta [nzAvatar]="avatarTemplate"></nz-card-meta>
    <ng-template #avatarTemplate>
        <nz-avatar
            *ngIf="post.imagePath !== null"
            nzSize="large"
            [nzSrc]="getImage(post.userId, post.imagePath)"
        ></nz-avatar>
        <nz-avatar
            nzSize="large"
            *ngIf="post.imagePath === null"
            nzIcon="user"
        ></nz-avatar>
    </ng-template>
</nz-card>
</cdk-virtual-scroll-viewport>

Есть ли альтернативы, кроме cdk-virtual-scroll-viewport?

Я смотрел на ngx-infinite-scroll

https://www.npmjs.com/package/ngx-infinite-scroll

Но не уверен, повторяет ли он элементы, подобные виртуальному скроллеру материала.

РЕДАКТИРОВАТЬ: проблема, которую я получаю, заключается в том, что, когда я прокручиваю его вниз, он частично отображает раздел create-comment-каждый раз, когда ячейка отображается в верхней части. Я, вероятно, собираюсь попробовать ngx-infinite-scroll. Кто-нибудь знает, перерабатывает ли он предметы?