Infinite scroll make ion-content scroll stay at same content after loading more content

Ionic Framework ionic-v3
1

Hi!

I’m having an issue with infinite scroll. It loads the elements as it’s suppose to do. However, when the infinite scroll is finished loading more items the content scrolls away, leaving the user confused what happened. When the infinite scroll is done loading and items were inserted into the DOM, the ion-content’s scroll distance to the bottom should be the same as before. What is the best way to achieve this?

This is what the template looks like:

<ion-content class="conversation" (ionScroll)="contentScroll$.next($event)" (DOMNodeInserted)="messageInserted$.next()">
  <ion-infinite-scroll (ionInfinite)="$event.waitFor(loadMoreMessages())" position="top" threshold="10%">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div class="conversation__message"
       *ngFor="let message of (conversation.messages$ | async)"
       [class.conversation__message--own]="message.sender.id === userId"
       [class.conversation__message--other]="message.sender.id !== userId">
    <div class="conversation__message__avatar" *ngIf="message.sender.id !== userId"
         [style.backgroundImage]="'url('+conversation.avatarUrl+')'">
    </div>
    <div class="conversation__message__bubble">{{message.text}}</div>
  </div>
</ion-content>

Do you have any idea how to solve this (preferably elegant and without glitches :sweat_smile:)?