Cannot get ngx-infinite-scroll to listen to window scroll - dom

Question

I am trying to implement ngx-infinite-scroll
I am unable to get it to do what I want which is listen to my browser or window scroll so I may scroll content and load when needed.
What's happening is can implement this library ONLY when I set the scroll to listen to some other div so the result is two scroll bars (1) browser window scroll bar (2) content div scroll bar - this is not desirable and creates a real messy UX.
You will notice a setting in the template "scrollWindow" I have tried changing this value without any success I'm not too sure what i'm doing wrong here...
Environment
Angular 8 with Angular Material
Template and Styling:
.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

change this [infiniteScrollContainer]="container" by [infiniteScrollContainer]="'.container'"