angular-ui / ui-scrollpoint

Add a 'ui-scrollpoint' class to elements when the page scrolls past them.
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-scrollpoint/master/demo/index.html
MIT License
28 stars 25 forks source link

trying infinite scroll with this plugin #10

Closed yahyaKacem closed 8 years ago

yahyaKacem commented 8 years ago

hey, first thanks for this plugin, I'm trying to do an infinite scroll effect with this plugin with ng-repeat, here's a plunker example on how I did it, but it has a bug the loading of additional data happen at the beginning of the load only when I set the offset to a positive number (+1 or 1) the loading happen after the first scroll to that offset and keep happening until last page is loaded, how can I make it so that it load only one page each time it reaches the bottom?

Note: I tried broadcasting the 'scrollpointShouldReset' event but that generated a new error and loaded one extra page.

Thanks, in advance.

plong0 commented 8 years ago

ui-scrollpoint-action callback takes element and distance as arguments. When distance < 0 it means your scrollpoint is out of view. I tested with your code and it works with app.loadMore like this:

app.loadMore          = function loadMoreF(elem, distance) {
    if (app.users.isLastPage || distance < 0) {
        return;
    }
    Store.getUsers().then(setUsers, error);
};
yahyaKacem commented 8 years ago

:+1:

plong0 commented 8 years ago

Just wanted to note that with version 2.0.0 , there are a couple changes to the ui-scrollpoint-action callback (as noted in PR #11)... the function parameters are reversed, so they are now function(distance, elem, edge)

Also in the case of ui-scrollpoint-edge="bottom" (more generally when edge parameter == 'bottom'), when distance <= 0 it means the scrollpoint has scrolled into view from the bottom. This is more consistent with other functionality where values < 0 are "above" the scroll edge.

A full example of how I set up infinite scrolling with version 2.0.0 is like so:

<div ui-scrollpoint ui-scrollpoint-edge="{bottom:'top'}" ui-scrollpoint-action="loadMore"></div>

$scope.loadMore = function(distance, elem, edge){
    if(distance <= 0){
        // load more content
    }
}

ui-scrollpoint-edge="{bottom:'top'}" means trigger the hit when the top edge of the element hits the bottom edge of the scroll target.

ui-scrollpoint-edge="bottom" means trigger the hit when the bottom edge of the element hits the bottom edge of the scroll target.

Hope this helps, and sorry for the switcheroo on these features, but I think this method makes more sense and ultimately offers more flexibility.