How to jump to the end of an "infinite-scroll" viewport?

839 views Asked by At

I'm using ui-scroll to implement infinite scrolling in my Angular application.

It's working perfectly and I'm using it to display a list of events.

However, when my app loads, it displays the first events by default (the index 1 actually). To see the most recent events, one has to scroll down the event list. This is a problem when the events list is really large and kind-of defeats the point of paginated loading because the web app has to go through all the events to get the most recent ones.

How can I instruct ui-scroll to start with the last events ? Obviously, I have a backend method (a HEAD request that I can use to fetch the total count of events) to get the initially desired index. I just can't find a way to put that initial index in ui-scroll.

Any clue ?


As requested, here is a code sample, although it's pretty "standard" ui-scroll stuff:

<ul ui-scroll-viewport class="event-list" ng-class="{loading: eventsLoading}">
  <li ui-scroll="event in eventsProvider" data-buffer-size="20" is-loading="eventsLoading">
    <p>event.text</p>
  </li>
</ul>

Here is what I have in the controller:

$scope.eventsProvider = {
  get: function(index, count, success) {
    $scope.events = ZoneEventsService.query({
      session_type: $scope.session_type,
      zone: $scope.zone,
      offset: index - 1,
      limit: count
    }, function(result) {
      success(result.items);
    });
  }
};
1

There are 1 answers

1
ereOn On

I actually found a way. In my controller, I defer the first loading of the data and manually offset my offset by the total count of events. Since ui-scroll handles negative offsets out-of-the-box, it just works.

$scope.eventsInfo = ZoneEventsService.head({
  session_type: $scope.session_type,
  zone: $scope.zone,
  limit: 0,
});

$scope.eventsProvider = {
  get: function(index, count, success) {
    // The promise will wait the first time around and be resolved already on following calls.
    $scope.eventsInfo.$promise.then(function() {
      $scope.events = ZoneEventsService.query({
        session_type: $scope.session_type,
        zone: $scope.zone,
        // Here goes the magic.
        offset: index - 1 + $scope.eventsInfo.total_count,
        limit: count
      }, function(result) {
        success(result.items);
      });
    });
  }
};