无法让 ngx-infinite-scroll 监听窗口滚动

Question

我正在尝试实现 ngx-infinite-scroll 我无法让它执行我想要的操作，即监听浏览器或窗口滚动，以便我可以滚动内容并在需要时加载。

发生的事情是，只有当我设置滚动来监听其他 div 时，才能实现这个库，因此结果是两个滚动条（1）浏览器窗口滚动条（2）内容 div 滚动条 - 这是不可取的，并且会创建一个真正的滚动条混乱的用户体验。 您会注意到模板“scrollWindow”中的一个设置我尝试更改此值但没有成功我不太确定我在这里做错了什么......

环境

• Angular 8 与 Angular 材质

模板和样式：

    .container {
  height: 100vh;
  width: 70vw;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 20px;
  overflow-y: auto;
}

HTML

    <app-navigation-bar></app-navigation-bar>
<app-userpost></app-userpost>
<div *ngIf="loading">
    <app-progress-spinner></app-progress-spinner>
</div>

<!-- infinite scroll div -->
<div
class="container"
infiniteScroll
[infiniteScrollContainer]="container"
[scrollWindow]="false"
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="5"
[infiniteScrollThrottle]="300"
(scrolled)="onScrollDown()"
>

        <mat-card *ngFor="let post of postObjects">
            <mat-card-header>
                <img mat-card-avatar src={{post.profile_picture}} alt="no profile image">
                <mat-card-title>{{post.email}}</mat-card-title>
                <mat-card-subtitle> {{post.upload_date | date:"medium"}} </mat-card-subtitle>
            </mat-card-header>
            <img mat-card-image src={{post.photo}}>
            <mat-card-content>
                <p>
                    {{post.author_comment}}
                </p>
            </mat-card-content>
            <!-- This fills the remaining space of the current row -->
            <mat-card-actions class="action-buttons">
                <button mat-button color="primary" (click)="post_like(post.post_id)">
                    <mat-icon>thumb_up_alt</mat-icon> {{post?.post_likes?.length}} Likes
                </button>
                <button mat-button color="primary" (click)="post_dislike(post.post_id)">
                    <mat-icon>thumb_down</mat-icon> {{post?.post_dislikes?.length}} Dislikes
                </button>
                <button mat-button color="primary">
                    <mat-icon>share</mat-icon> Share
                </button>
                <a mat-button color="primary" target="_blank">
                    <mat-icon>visibility</mat-icon> View
                </a>
            </mat-card-actions>

            <mat-accordion>
                <div *ngIf="post?.post_comments?.length > 0">
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <div class="comment-header">
                                <span class="label label-primary">{{post?.post_comments?.length}} Comments</span>
                            </div>
                        </mat-expansion-panel-header>
                        <mat-list>
                            <div *ngIf="post?.post_comments?.length > 0">
                                <div *ngFor="let postSection of post.post_comments; let i = index">
                                    <mat-accordion>
                                        <mat-expansion-panel>
                                            <mat-expansion-panel-header collapsedHeight="80px" expandedHeight="30px">
                                                <mat-panel-title>
                                                    <div style="max-height: 53px; text-overflow: ellipsis">
                                                        <img mat-card-avatar
                                                            src="https://source.unsplash.com/random/200x200"
                                                            style="padding: 5px">
                                                        <strong
                                                            style="padding: 5px">{{postSection?.comment_author}}</strong>
                                                        <small style="padding: 5px">
                                                            {{postSection?.date | date:"medium"}}</small>
                                                    </div>
                                                </mat-panel-title>
                                            </mat-expansion-panel-header>
                                            <hr>
                                            <p>{{postSection?.post_comment}}</p>
                                        </mat-expansion-panel>
                                    </mat-accordion>
                                </div>
                            </div>
                        </mat-list>
                    </mat-expansion-panel>
                </div>
            </mat-accordion>
            <form [formGroup]="PostComment">
                <div class="input-group">
                    <div id="container">
                        <div id="profile_img">
                            <div class="actions">
                                <div class="avatar">
                                    <img class="d-flex mr-3 rounded-circle" src={{userAvatar}} alt="Cannot Load Photo"
                                        width="30" height="30">
                                </div>
                            </div>
                        </div>
                        <mat-form-field class="example-full-width" style="margin-top: 10px;">
                            <textarea matInput formControlName="post_comment" #message maxlength="500"
                                placeholder="Leave a comment"></textarea>
                            <mat-hint align="start">
                                <strong>Say something constructive..</strong>
                            </mat-hint>
                            <mat-hint align="end">{{message.value.length}} / 500</mat-hint>
                        </mat-form-field>
                        <div class="post-button">
                            <button mat-raised-button (click)="createComment(post.post_id)">Post</button>
                        </div>
                    </div>
                </div>
            </form>
        </mat-card>
        <div *ngIf="end_of_data">
                <strong><h3>No More Data To Load..</h3></strong>
            </div>
</div>

Answer 1

将 [infiniteScrollContainer]="container" 更改为 [infiniteScrollContainer]="'.container'"

Answer 2

我通过添加

[fromRoot]="true"

和删除

[scrollWindow]="false"

解决了类似的问题。这将给出以下

<div>

<div
    infiniteScroll
    [infiniteScrollDistance]="2"
    [infiniteScrollThrottle]="5"
    [infiniteScrollThrottle]="300"
    (scrolled)="onScrollDown()"
    [fromRoot]="true"
>