Infinite Scrolling: Bottom to Top

help
1

Hey guys,
I’m using Framework7 combined with Meteor Blaze. In my chat view, I’m using a div with an own scrollbar. In this div, I’ve the following code:

{{#each messages}}


    <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">{{parseEmoticons text}}
            <p class="time">{{formatDate created_at}}</p>
        </div>
    </div>

{{/each}}

To make it very simply, I’ve used this template helper.

Template.chat.helpers({
'messages:' function() {
return Messages.find({chat_id: this._id}, {sort: {created_at: -1}, limit: page.get()});
}});

The var “page” is a reactive variable, so if I reach the top of my chat messages, inifnite event will be fired:

$$('.infinite-scroll').on('infinite', function () {
page.set(page.get() + 20);
});

This works, I’ll see older messages if I reach the top - but I’ve some trouble with the scrolling position. After loading, my scrolling position stays at the top - with the new loaded items at the first - but I want to stay at the last reading position, adding the older items above the ones of the last reading position (like WhatsApp).

Is there any “easy” way to realize it (f.e. a plugin?).

If you don’t understand what I mean, here is a little visualtion of my problem:

At the moment:

[inf_loaded3] x scrolling position
[inf_loaded2]
[inf_loaded1]
[newest_3]
[newest_2]
[newest_1]

I want:

[inf_loaded3] 
[inf_loaded2]
[inf_loaded1]
[newest_3] x scrolling position
[newest_2]
[newest_1]
1 Like
2

You can perhaps take cue from https://github.com/okgrow/router-autoscroll/

I know it is a different context, but still it is about keeping track of scroll position reactively.

3

Yeah,
but in my case, I’m not changing the route. My current solution is to add an ID element for every element and scroll back to it with jQuery. But that looks a little bit buggy on a mobile device.

4

I would just hardcode itemHeight and than increase offset by newItemCount * itemHeight
Or not hardcode but actually read it from added element/elements.