[SOLVED] Reverse infinitescroll

Ionic Framework ionic-v3
1

Hey,

I’ve got a infinite list and I want my users to be able to scroll it while scrolling to the top not to the bottom. Anyone achieved a reversed infinite scroll (ion-infinite-scroll) ?

From the documentation:

ion-infinite-scroll

The Infinite Scroll allows you to perform an action when the user scrolls a specified distance from the bottom of the page.

What I want to achieve, is to start an action the the user scrolls a specified distance from the top of the page.

2

I’ve built a custom code. I listen to the scroll, ensure I don’t call my service many times and afterwards scroll a little bit down to let the user scroll again (to load the next elements).

this.content.ionScroll.subscribe(($event: any) => {
        if ($event.scrollTop <= 10 && $event.scrollTop < this.lastScrollTop && !this.lastPageReached && !this.loading) {
            this.zone.run(() => {
                this.findStuffs().then(() => {
                    this.content.scrollTo(0, 200, 0);
                });
            });
        }

        this.lastScrollTop = $event.scrollTop;
    });

where:

  • lastScrollTop: is a class variable. Needed to be sure the user is scrolling up not down
  • lastPageReached: I load x elements after x elements till everything is loaded
  • loading: if service call is running, don’t call it another time

Note: I didn’t test yet on a real phone, may at the end not work because of the performance of the scroll.subscribe on real devices

3 Likes
3

can i use this logic for infinite scroll for chat app ,where i need infinite scroll in opposite direction, i need infinite scroll from bottom to top to fetch old messages, i am working on ionic 3
I just want infinite scroll from bottom to top direction

my env info:-

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms android 7.0.0, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 6 other plugins)

System:

Android SDK Tools : 26.1.1 (/home/pawan/Android/Sdk/)
NodeJS : v10.8.0 (/usr/local/bin/node)
npm : 6.2.0
OS : Linux 4.18

4

Hi, @Pawang1432
I am trying to create a chat app too. But i can’t get the messages to pop in to the view from the bottom to the top.
Did you manage to do that?

5

Hi

Try scrollToBottom method of the ion-content API?

Tom

6

The scroll to bottom doesn’t work for the case. Because It will simply scroll the content to the bottom what i need is when a user send a message the message to show from the bottom of the screen

image
image.png1221×1307 16.7 KB

7

There is a property named “position” for InfiniteScroll. You can set position=“top” to fire event when scroll top of the page.

Example:

  <ion-infinite-scroll position="top" (ionInfinite)="loadMoreChat($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading..">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
1 Like