Meteor.js 聊天 - scrollToBottom(); 仅适用于发送选项卡

Question

我正在关注rdickert 的这个教程chat-tutorial/chat-tutorial-part-4，特别是对于 scrollToBottom 函数。此功能的目的是在聊天中发送新消息时滚动到底部。但它只滚动发送它的人的标签。其他人（选项卡）发送的消息似乎不会为该聊天室中的其他当前用户触发此功能。我在打开两个标签的情况下对其进行了测试，一次在 Chrome 中，第二次我在 Chrome 中使用了第一个标签，在 Firefox 中使用了另一个标签。两种方式的结果相同。这是我存储 scrollToBottom-Function 的地方：进口/api/chat/chat.jsvar 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);