如何在每条消息到达客户端后向下滚动Meteor中的聊天室消息

时间:2015-11-29 13:18:51

标签: javascript meteor

我想运行jquery,每当新邮件到达客户端时,它会向下滚动到聊天框div的底部。现在它加载所有消息,但是当我添加新消息时,它们只是转到div的底部并且不可见。

  Template.messages.helpers({
    comments: function() {
      return Comments.find()
    },
    date: function(dateFull) {
      return moment(dateFull).calendar();
    }
  })

  Template.messages.onRendered(function() {
      $('.comment-window').scrollTop(1000000)
  })


<template name="chat">
  <div class="chatbox">
    <div class="chat-heading">
        <span style="color:grey;">chat @ main <i style="float:right; margin-right:10px;" class="fa fa-minus-square"></i></span>
    </div>
    <div class="comment-window" style="padding: 00px 15px; display:flex; overflow-y:scroll; flex-direction:column; height:308px;">
      {{> messages}}
    </div>
    <form class="message">
      <input type="text" name="message" placeholder="Send a message...">
      <button class="btn send-btn">send</button>
    </form>
  </div>
  <div class="chat-icon">
    <i class="fa fa-envelope"></i>
  </div>
</template>


<template name="messages">
  {{#each comments}}
    <div style="margin:5px 0px;">
      <div>
          <span style="font-size:0.8em; text-transform:uppercase; font-weight:700;">{{name}} </span>
          <span style="color:grey; font-size:0.8em;">  {{date createdAt}}</span>
      </div>
      <div>
        {{comment}}
      </div>
    </div>
  {{/each}}
</template>

0 个答案:

没有答案