在 Meteor 中添加数据时，如何滚动到 div 的底部？答案

【问题标题】：How do I scroll to the bottom of a div as data is added in Meteor?在 Meteor 中添加数据时，如何滚动到 div 的底部？
【发布时间】：2015-10-04 20:11:22
【问题描述】：

我正在 Meteor 中编写一个信使应用程序，我想对其进行设置，以便当任一用户键入消息时，它会向下滚动到两个用户的 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"));
      }
    });
});

【问题讨论】：

标签： javascript jquery html css meteor

【解决方案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

【讨论】：

@DavidKleiman 很高兴它有帮助！ Tracker.afterFlush 是我得到的最重要的专业提示之一。 :) 它几乎在每个项目中都派上用场。

【解决方案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();
    }
});

这会在您的对话集合发生任何变化时触发您的“向下滚动”。

希望这会有所帮助。

【讨论】：