How to implement back button in Infinite Scrolling in AngularJs?

Question

i'm building an app with angularjs, i have implemented infinite scrolling technique because i have a lot of items to show, so it's a better experience than pagination, but the bad thing that i'm having it's that if the user clicks on item it goes to item page, but when he wants to go back he will be on the top and he should keep scrolling. that's what i want to accomplish if he hits back button he could back to his position where he were !!

Listing Items:

<div class="container" id="infinit-container" ng-controller="ArticlesController">

    <div id="fixed" when-scrolled="LoadMore()">
        <div ng-repeat="article in Articles">
            <article-post article="article"></article-post>
        </div>
    </div>
</div>

here is when-scrolled directive

app.directive('whenScrolled', function () {
return function (scope, element, attrs) {
    $('#fixed').height($(window).height());
        var div = element[0];
        element.bind('scroll', function () {
            if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
                scope.$apply(attrs.whenScrolled);

            }
        })
    }
})

thats the controller

app.controller('ArticlesController', function ($scope, UserService) {
  $scope.Articles = [];

  var page = 0;
  $scope.LoadMore = function () {
    UserService.Articles(page)
      .success(function (data) {
        $scope.Articles.push.apply($scope.Articles, data);
      });
    page++;

  };
  $scope.LoadMore();
});

Hiller

Put an element ID in the query string from the back button, and add some code to your API that will load everything up to that element. But there are a bunch of ways to do this, it really depends on your preference. – Embellishment

is your scroller bidirectional? – Diatropism

I would put the page number that you're using when you load more articles into the hashed path. Then when the infinite scrolling page is loaded, check the page number and load everything up to that. If your scrolling is bidirectional, then only load that page and have your code load previous pages as you scroll up. – Osteitis

@JustinRyder code exemple or jsfiddle.net could be helpful !! – Hiller

I've never implemented infinite scrolling, but this is how I think I would do it. Basically, you would inject $routeParams and $location into the controller and set your page variable to a page parameter from the $routeParams, instead of 0. Your LoadMore function needs to know if it's scrolling up or down so that it increments or decrements the page accordingly. When scrolling occurs, you also need to update the $location with the current page the user is scrolled to. docs.angularjs.org/api/ngRoute/service/$routeParams docs.angularjs.org/api/ng/service/$location – Osteitis

The best way to do this is to cache the page number and items you have loaded so far and then navigate to detail page. When coming back, if cached data is present, load it. – Fibril

@IliyassHamza - Any solutions yet? I'm very curious as to how people solve this issue. Storing the page number and everything works fine, but what about if there is a large list that needs to load and there is a pause before it jumps back to the right item? Something we have to deal with? – Whist

Answer 1

im using page number, save page number somewhere (i prefer sessionStorage) when going to see the item detail , when user is comming back to list, read page number and load the page.

it is the simple code for main page controller (list)

app.controller('ArticlesController', function($scope, UserService) {
    $scope.Articles = [];

    var page = 0;
    $scope.LoadMore = function() {
        UserService.Articles(page)
            .success(function(data) {
                $scope.Articles.push.apply($scope.Articles, data);
            });
        page++;

    }

    $scope.LoadArticle = function(articleId) {
        sessionStorage.setItem("pageNumber", page);

        /// change path to somewhere you want show your article
    };


    //it will load the page you coming back from
    if (sessionStorage["pageNumber"]) {
        page = parseInt(sessionStorage["pageNumber"]);
    }
    LoadMore();
});

because of using sessionStorage , it will deleted if user close the browser or page as expected.

Jemison