我想运行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>