當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

Answer 2

通過跟蹤 模板助手的不同方法：

我利用了模板幫助器，因為它已經反應性地跟蹤所有更改（和新）消息 。 因此，您可以在其中放置向下滾動命令。

我假設你的JS文件中有這樣的東西：

chatBox.js

Template.chatBox.helpers({
    chatMessages: function() {
       return Conversations.find({conversationId: conversationId},
      {sort: {d: -1}, limit: 20}).fetch().reverse();
    },
});

（作為chatMessages.d發布和conversationId的日期是特定聊天室的反應變量，按結束日期排序，並按相反順序顯示，以便上次聊天將顯示在chat-messages div的末尾，限於最近20條消息）

只需在那里添加向下滾動命令，您就可以：

Template.chatBox.helpers({
    chatMessages: function() {
       //scroll down not animated
       $('#chat-messages').scrollTop($('#chat-messages').prop('scrollHeight'));
       return Conversations.find({conversationId: conversationId},
      {sort: {d: -1}, limit: 20}).fetch().reverse();
    }
});

或者為平滑滾動設置動畫：

Template.chatBox.helpers({
    chatMessages: function() {
       //scroll down with animation
       $('#chat-messages').animate({scrollTop: $('#chat-messages').prop('scrollHeight')}, 500);
       return Conversations.find({conversationId: conversationId},
      {sort: {d: -1}, limit: 20}).fetch().reverse();
    }
});

這將觸發您在對話集合中的任何更改時“向下滾動”。

希望這可以幫助。