[SOLVED] Reverse infinitescroll


#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


InfiniteScroll (Top)
#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