Search code examples
meteorangularnginfinitescroll

Angular2 Meteor, issue implementing infinite scroll (scroll reset to top)


Trying to do an infinite scroll page that displays elements as the user scrolls.

So each time I detect that the scroll reaches the end of the page I call

this.recordLimit += 10;
this.subscribe('movements', {limit: this.recordLimit});

and that triggeres (autorun)

        this.autorun(h => {
            if (this.ready()) {
                this.items = Items.find(<potential limit filter here too>);
            }

All right. That is working. However each time this.items = Items.find(); is called, the user's browser is scrolled back up to the top.

Potentially this is because the dom elements are removed, the scroll is reset, and then the elements are added again without restoring the previous scroll position.

What am I doing wrong ?

Examples where it is 'apparenty' working:

@########### Edit ############@

Actually, I noticed that, putting after the Items.find() a h.stop() to stop the subscription, this works... I guess the previous mango cursor is updated with the last subscription limit.

However I am still not able to understand why this was repainting everything in the initial case..


Solution

  • I believe the problem is you're finding the documents again as you guessed. You should only subscribe to your publication in the autorun. Check this from Angular2 & Meteor tutorial which explains pub/sub pretty well.

    In the autorun, it will rerun the find() and re-render all the documents which is why you need to rerun only the subscription in autorun for your case. Because of how pub/sub and observers work, since the only thing you change is the "limit" in your function and the rest is the same, your publish will only return the new documents, and keep the previously returned ones. The find() query on the client side will fetch the documents returned from the pub/sub and it won't rerender the already fetched documents when the amount of documents change.