Facebook-style dialogue box with reversed endless scroll problem

help
1

Hi all! I’m trying to implement the vertical endless scroll. Messages are sorted in the asc order so the newest messages append at the bottom and old ones append at the top.

The problem is that old messages push the rest of messages to the bottom.
What I want to do is to append things insensibly. (Like Facebook does)

![enter image description here][1]

After reload I simulate scroll to move messages down. It feels awry.

$('.messages-wrapper').scrollTop($('.messages-overflow-wrapper').outerHeight())

Is there a more natural way to say to the browser that I want to ‘stretch’ a div to the top but not to the bottom.

// sorry can't post images right now
http://i.stack.imgur.com/PzOfc.gif
http://i.stack.imgur.com/Knhgv.png

What I tried:

Template.DialogueBox.onRendered(function () {
  var self = this;
  this.initializing = true;

  Messages.find({conversationId: self.data._id}).observe({
    added: function (doc) {
      if (new Date() - doc.createdAt < 15000) {
        setTimeout(function () { // fix
          // Scroll down if new messages are added
          !this.initializing && self.$('.messages-wrapper').scrollTop(self.$('.messages-overflow-wrapper').outerHeight()); 
        }, 0);
      }
    },
    fetch: ['createdAt']
  });

  self.$('.messages-wrapper').bindWithDelay('scroll', function (e) {
    if ($(e.target).scrollTop() < 300) {
      self.messagesLimit.set(self.messagesLimit.get() + 30);
    }
  }, 100);

  this.initializing && self.$('.messages-wrapper').scrollTop(self.$('.messages-overflow-wrapper').outerHeight());
  this.initializing = false;
});