我如何使用Meteor回调与Jquery每次重新渲染时自动滚动到div的底部？

我正在Meteor中构建一个基本的实时消息应用程序，目前每次创建消息时，它都会附加到页面上的消息列表中，一切正常。 但是，一旦messagesList div的内容溢出（我将其设置为滚动），我就无法再看到最新的消息，而无需每次都手动向下滚动。

每次消息列表重新渲染时，使用回调自动跳到底部（例如使用Jquery scrolltop）的“meteor方式”是什么？ 我在消息列表模板帮助器中找到了它但是我没有在scrollTop上返回一个值，我无法弄清楚它是我的选择器还是与Meteor有关，即我放置代码的位置。 所以我真的很感激一些指点。

这就是我所拥有的：

messagesList.html

 
 
 {{#each messages}} {{> messageItem}} {{/each}} 
 
  

messagesList.js：

 Template.messagesList.helpers({ messages: function() { return Messages.find(); } }); Template.messagesList.rendered = function () { console.log("scrolltop is " + $('#list').scrollTop); // $('#list').scrollTop( $('#list').height() ) }; 

messageItem.html：

  
 
 
 {{sentBy}}
 {{msgText}} 
 
 
  

MessageSubmit.html：

  
  Speak! 
  

messageSubmit.js：

 Template.messageSubmit.events({ 'submit form': function(e) { e.preventDefault(); console.log('new comment created') var user = Meteor.user(); var message = { msgText: $(e.target).find('[name=msg]').val(), sentBy: user.profile.name, userId: user._id } message._id = Messages.insert(message); $('.pure-input-rounded').val(""); } }); 

的main.css：

 html, body { height: 100%; } #layout { max-height: 60%; left: 20px; top: 60px; position: relative; overflow: scroll; padding-bottom: 60px; } h1 { font-size: 2em !important; } .pure-form { position: absolute; left: 10px; bottom: 20px; } 

Answer 1

我认为没有一种特别流行的方法可以做到这一点，但是对你的代码进行这种小修复它应该有效：

 Template.messagesList.rendered = function () { console.log("scrolltop is " + $('#list').scrollTop()); $('#list').scrollTop( $('#list').prop("scrollHeight") ); };