ionic-framework: bug: ion-infinite-scroll on top

Bug Report

Ionic version: [x] 3.x [x] 4.x

Current behavior: Happen the same in V4 All info here --> ionic-team/ionic-v3#831 Almost 1 year with that issue opened

Expected behavior:

Steps to reproduce: HTML :

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
 </ion-header>
 <ion-content >
  <ion-infinite-scroll [position]="top" (ionInfinite)="getMoreMessagesI($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <ion-list>
    <ion-item *ngFor="let message of messages; let i = index" attr.id="{{i}}">
      <p>{{ message.name }}</p>
    </ion-item>
  </ion-list>
 </ion-content>

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent, IonInfiniteScroll } from '@ionic/angular';
@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  @ViewChild(IonInfiniteScroll, { static: true }) infiniteScroll: IonInfiniteScroll;
 @ViewChild(IonContent, { static: true }) content: IonContent;
 
 private messages: any[] = [];
 private delay = (time: number) => new Promise(res => setTimeout(() => res(), time));
 constructor() {}
 async ngOnInit() {
   this.setInitialMessages();
 }
 private async getMoreMessagesI(event) {
   const more = [
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
     {name: Math.random()},
   ]; 
   await this.delay(2000);
   event.target.complete();
   this.messages.unshift(...more);
 }

 private setInitialMessages() {
   const initial = [
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
     {name: 'a'},
   ];
   this.messages.push(...initial);
 }
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.1 (/Users/pc/Desktop/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   NodeJS : v10.16.3 (/Users/pc/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

DEMO https://imgur.com/a/EsRy84Q

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 19
Comments: 27 (5 by maintainers)

Most upvoted comments

@spencerdezartsmith @nosTa1337

It also doesn’t hold my scroll position but rather scrolls me to the top.

It will be improved better.

// scroll position before merge new array
const scrollElement = await this.content.getScrollElement();
const scrollAmount = scrollElement.scrollHeight ;

// merge new array.
this.items = newItems.concat(this.items);

await Promise.race([
  new Promise((resolve) => requestAnimationFrame(resolve)),
  new Promise((resolve) => setTimeout(resolve))
]);

// go to scroll position
const toPosition = scrollElement.scrollHeight - scrollAmount;
await this.content.scrollByPoint(0, toPosition, 10);

rdlabo on Sep 20, 2021

Any updates on this? I am facing the same issue in Ionic 5. Scroll to top gets stuck and need to scroll down a little to trigger the next scroll. It also doesn’t hold my scroll position but rather scrolls me to the top.

spencerdezartsmith on May 3, 2021

Guess I’ll just leave it at bottom, transform rotate 180deg and call it a day lol EDIT: actually what I ended up doing is I enabled scroll events on <ion-content>, retrieved the underlying scrolling element by calling .getScrollElement() on IonContent’s view child and in (ionScroll) callback figure out whether we are at bottom or top that way can infinite scroll both ways ` public scrollHandler(e: any): void {

  const top = this.scrollingElement.scrollTop;
  const height = this.scrollingElement.scrollHeight;
  const offset = this.scrollingElement.offsetHeight;

  if(top > height - offset -1) {
    console.log("bottom");
  }

  if(top === 0 && !this.isLoadingOlderMessages) {
    console.log("top")
  }

ihorbond on May 13, 2020

For me also the same bug on Ionic v4. I have a messaging application, and this bug really breaks the user experience…

michielcrabbe96 on Nov 15, 2019