Infinite scroll working with scroll to top button

[Arxero]

I would like to know how to use this, the problem is that infinite scroll wants .mat-sidenav-container to be height: 100% but once I do that the hostlister stops working.

<mat-sidenav-container (backdropClick)="close()">
  <mat-sidenav #sidenav (keydown.escape)="close()" disableClose class="sidenav">
    <div>
      <button mat-icon-button (click)="close()">
        <mat-icon>close</mat-icon>
      </button>
    </div>

    <app-menu></app-menu>
  </mat-sidenav>

  <mat-sidenav-content class="infinite-scroll">
    <!-- <app-goto-top></app-goto-top> -->
    <app-header [sidenav]="sidenav"></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>

  </mat-sidenav-content>
</mat-sidenav-container>

And even if I put some random button somewhere scroll it wouldn't work as long as infinite scroll is working fine, that is I assume cause both are using the scroll event. I would be glad if there is a way to do it, thank you.

[Arxero]

after a couple of months, I found that using the height: 100% on my main HTML element was causing the issue, so make sure you don't have it too, closing the issue myself