Meteor.js聊天-scrollToBottom（）; 僅適用於“發送”標簽

Question

我遵循的是rdickert的本教程chat-tutorial / chat-tutorial-part-4 ，特別是對於scrollToBottom函數。

此功能的目的是在聊天室內發送新消息時滾動到底部。 但是正確的是，它僅滾動發送該人的選項卡。 對於此聊天室中的其他現有用戶，其他人（選項卡）發送的消息似乎並未觸發此功能。

我測試了兩個打開的選項卡，一次是在Chrome中，第二次是使用Chrome中的第一個選項卡，然后是Firefox中的另一個選項卡。 兩種方法的結果相同。

這是我存儲scrollToBottom-Function的位置：

導入/api/chat/chat.js

var autoScrollingIsActive = false;
 scrollToBottom = function scrollToBottom (duration) {
  var messageWindow = $(".chatWindow");
  var scrollHeight = messageWindow.prop("scrollHeight");
  messageWindow.stop().animate({scrollTop: scrollHeight}, duration || 0);
};

然后，我想在用戶界面部分使用該功能

導入/ui/components/chat/chat.js

這是用戶實際發送消息的事件。

'keypress #text'(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    const text = document.getElementById('text').value;
    Meteor.call('chat.start', text, (error) => {
      if (error){
        alert(error.error);
      } 
      else {
        scrollToBottom(200);//Function triggers after msg is sent
      }
    });
  }
}

我還嘗試使用onRendered-template觸發scrollToBottom-Function，但是結果相同

 Template.message.onRendered(function () { 
  scrollToBottom(250);
 });

誰能向我解釋這種行為背后的原因是什么？ 謝謝！

Answer 1

每個新消息都會觸發onRendered回調，因此它應該可以工作。

問題可能來自滾動功能。 嘗試更換

messageWindow.stop().animate({scrollTop: scrollHeight}, duration || 0);

與

$('html').stop().animate({scrollTop: scrollHeight}, duration || 0);

Answer 2

抱歉，我發現了我的錯誤。 我在消息模板中迭代了消息。 不在chatWindow-Template內，如指示。

{{#each messages}}
{{> message}}
{{/each}}