javascript - 每次重新呈现内容时，如何将 Meteor 回调与 Jquery 一起使用以自动滚动到 div 的底部？

Question

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

每次消息列表重新呈现时使用回调自动跳到底部(例如使用 Jquery scrolltop)的“ meteor 方式”是什么？我在消息列表模板帮助程序中进行了尝试，但我没有在 scrollTop 上获得返回值，我无法确定它是我的选择器还是与 Meteor 相关的东西，即我将代码放在哪里。所以我真的很感激一些指示。

这是我所拥有的:

消息列表.html

<template name="messagesList">
  <div class="pure-g-r content" id="layout"> 
    <div class="pure-u-1" id="list">
      {{#each messages}}
          {{> messageItem}}
      {{/each}}
    </div>
  </div>
</template>

消息列表.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:

<template name="messageItem">
  <div class="email-item email-item pure-g">
    <div class="pure-u-3-4">
      <p>
        <strong>{{sentBy}}</strong><br>
        {{msgText}}
      </p>        
    </div>
  </div>
</template>

MessageSubmit.html:

<template name="messageSubmit">
  <form class="pure-form">
    <input type="text" name="msg" class="pure-input-rounded">
    <button type="submit" class="pure-button">Speak!</button>
  </form>
</template>

消息提交.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("");
  }
});

主.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

我不认为有一种特别 meteor 的方法可以做到这一点，但是通过对您的代码进行这个小修复，它应该可以工作:

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