angularjs infinite scroll bottom top

Question

I'm using ngInfiniteScroll, but the default action is to load more items, when the bottom is reached, just like facebook timeline, but I need the opposite, I need to load the items, when the top is reached.

Is there a way to do that with ngInfiniteScroll or with another way?

Thanks a lot.

Aero204 · Accepted Answer · 2014-07-31 18:15:44Z

1

I don't know if it would be possible with nginfinitescroll, but i had to recently write my own. This code will load more data (10 at a time) into my scope.

scrolled

app.directive('scrolled', function () {

    return function (scope, elm, attr) {
        var raw = elm[0];
        var funCheckBounds = function (evt) {
            var rectObject = raw.getBoundingClientRect();
                //rectObject.bottom <= window.innerHeight for scroll to bottom
                if (rectObject.top >= window.innerHeight) {
                    scope.$apply(attr.scrolled);
                }
           };
       angular.element(window).bind('scroll load', funCheckBounds);
    };
});

And of course put scrolled in your template.

answered Jul 31, 2014 at 18:15

Aero204

9910 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aero204 Over a year ago

I also just found this, maybe better for what you want to do: nicolaspeters.wordpress.com/2014/08/01/…

Collectives™ on Stack Overflow

angularjs infinite scroll bottom top

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related