[SOLVED] Reverse infinitescroll

Ionic Framework ionic-v3
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