在流星中的聊天机器人响应后滚动到聊天底部答案

【问题标题】：Scroll to bottom of chat after response from chatbot in meteor在流星中的聊天机器人响应后滚动到聊天底部
【发布时间】：2016-11-20 19:47:39
【问题描述】：

我正在使用流星构建一个简单的聊天机器人应用程序。当用户发送短信时，文本被转发到我的聊天机器人 api。当我从请求中得到回复时，我想滚动到聊天的底部。

我在 stackoverflow 上找到了这个答案：How do I scroll to the bottom of a div as data is added in Meteor?

当用户发送消息时，滚动可以工作，但是一旦我从聊天机器人收到响应，滚动条就不再位于底部。我必须等到响应插入完成吗？

我错过了什么？

用户添加新消息：

Template.chat.events({
'submit .new-message'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    // Get value from form element
    const target = event.target;
    const text = target.text.value;
    const chatId = FlowRouter.getParam("chatId");

    // Insert a task into the collection

    const callback = function () {
        let messages = document.getElementById('messages');
        setTimeout(() => {
            messages.scrollTop = messages.scrollHeight;
        }, 300);
    }
    Meteor.call('messages.insert', text, chatId,callback);

    // Clear form
    target.text.value = '';

    }
});

这是我调用聊天机器人 api 来处理用户输入并做出相应响应的部分（插入对集合的响应，滚动到底部）：

Meteor.methods({
'messages.insert'(text, chatId, callback) {

    check(text, String);

    Messages.insert({
        text,
        chatId,
        user: true,
        createdAt: new Date()
    });

    let options = {
        sessionId: chatId
    };

    let request = app.textRequest(text, options);

    request.on('response', Meteor.bindEnvironment(function (response, errror) {
        text = response.result.fulfillment.speech + '<br><br><button class="js-yes">Ja</button><button class="js-no">Nein</nein>';

        Messages.insert({
            text,
            chatId,
            user: false,
            createdAt: new Date()
        });
        callback();

    }, function (error) {
        console.log(error);
    }));

    request.end();

}
});

这里是html：

<template name="chat">
  <ul id="messages">
    {{#each messages}}
      {{> message}}
    {{/each}}
  </ul>
  <form class="new-message">
    <input type="text" name="text" autocomplete="off" placeholder="Write a new message" />
  </form>
</template>

及其 css 部分：

#messages {
    height: 500px;
    overflow-y: scroll;
}

【问题讨论】：

标签： javascript jquery html meteor

【解决方案1】：

我想如果你移动你的回调函数：

const callback = function () {
    let messages = document.getElementById('messages');
    setTimeout(() => {
        messages.scrollTop = messages.scrollHeight;
    }, 300);
}

由更新集合时运行的辅助方法调用，然后您可以省去插入后进行的调用，因为它会运行更新集合的任何人。在执行此操作时，您可能希望给它一个比“回调”更好的名称

【讨论】：