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-part上的功能

进口/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

我发现了我的错误。我迭代了消息模板中的消息。不像指示那样在 chatWindow-Template 里面。{{#each messages}}{{> message}}{{/each}}

Answer 2

该onRendered触发回调每一个新的消息，所以它应该工作。问题可能来自滚动功能。尝试更换messageWindow.stop().animate({scrollTop: scrollHeight}, duration || 0);和$('html').stop().animate({scrollTop: scrollHeight}, duration || 0);