Ionic infinite scroll inverse direction

Question

I am developing a ionic chat app implementing infinite scroll over ng-repeat to handle lazy load. The problem is next: infinite scroll start at top of view (showing first oldest chats) and handles lazy load when user scroll bottom to show newest chat. I need inverse logic to show first last chat and when user scroll up, the view show older chats.

Resume: I need ionic infinite scroll starts at bottom position and when user scrolling upward the view shows the oldest chats.

score 0 · Answer 1 · answered Aug 31 '18 at 13:07

I found a couple of examples that might help you get started. js fiddle and similar question

Below is code from the fiddle, I didn't create it.

function Main($scope) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.unshift({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', ['$timeout', function($timeout) {
    return function(scope, elm, attr) {
        var raw = elm[0];

        $timeout(function() {
            raw.scrollTop = raw.scrollHeight;          
        });         

        elm.bind('scroll', function() {
            if (raw.scrollTop <= 100) { // load more items before you hit the top
                var sh = raw.scrollHeight
                scope.$apply(attr.whenScrolled);
                raw.scrollTop = raw.scrollHeight - sh;
            }
        });
    };
}]);

and the html code

<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>

score 0 · Answer 2 · answered Oct 19 '19 at 20:19

Simple solution, works in Ionic 4 :

1.)Reverse your complete message list in your component.ts with javascript's .reverse(). Then you can do all the Ion-Infinite-Scroll logic to it.

2.) When showing the message list in Html with *ngFor reverse it again (f.e. *ngFor=let message of messages.inverse() )

3.) Put position="top" inside your <ion-infinite-scroll>

Ionic infinite scroll inverse direction

2 Answers2