当Meteor中添加数据时,如何滚动到div的底部？

Question

我正在Meteor中编写一个messenger应用程序,我想设置它,以便当任一用户键入消息时,它会向下滚动到div的底部.我将消息存储messages在集合中的对话文档中调用的列表中Conversations.我正在使用cursor.observeChanges,似乎回调在数据在客户端呈现之前触发,因此它不会一直滚动到底部.

这是html:

<template name="chat">  
    {{> chatBox}}
</template>

<template name="chatBox">
    <div class="chat-box">
        <div id="chat-messages">
            {{#each chatMessages}}
                <div class="individual-message">
                    {{message}}
                </div>
            {{/each}}
        </div>
        <form id="chat-input">
            <input class="add-message" autocomplete="off" placeholder="Write something..." name="text" type="text">
      </form>
    </div>
</template>

这是相关的CSS:

#chat-messages {
    overflow-y: scroll;
    width: 250px;
    height: 450px;
    padding: 15px;
    position: absolute;
}

这是js:

Tracker.autorun(function(){
    ...
    Conversations.find(conversationId).observeChanges({
      changed: function(id, fields){
         $("#chat-messages").scrollTop($("#chat-messages").prop("scrollHeight"));
      }
    });
});

Answer 1

每当我遇到Blaze没有机会及时呈现某个Javascript函数的问题时,我会使用Tracker.afterFlush.这会等到渲染周期完成后再运行一些代码,例如:

// Inside a Meteor event callback
Tracker.afterFlush(function () {
  var $someItem = $('....');

  $(window).scrollTop($someItem.offset().top);
});

http://docs.meteor.com/#/full/tracker_afterflush