当Meteor中添加数据时，如何滚动到div的底部？ [英] How do I scroll to the bottom of a div as data is added in Meteor?

问题描述

我在Meteor中编写了一个信使应用程序，我想设置它，以便当用户键入消息时，它滚动到div的底部。我将该消息存储在 Conversations 集合中的会话文档中的消息列表中。我使用 cursor.observeChanges ，看起来回调在数据呈现在客户端之前触发，所以它不会一直滚动到底部。 / p>

这里是html：

 < template name =chat > 
 {{> chatBox}} 
< / template> 
 
< template name =chatBox> 
< div class =chat-box> 
< div id =chat-messages> 
 {{#each chatMessages}} 
< div class =individual-message> 
 {{message}} 
< / div> 
 {{/ each}} 
< / div> 
< form id =chat-input> 
< input class =add-messageautocomplete =offplaceholder =Write something ...name =texttype =text> 
< / form> 
< / div> 
< / template> 
  

这里是相关的css：

 ＃chat-messages {
 overflow-y：scroll; 
 width：250px; 
 height：450px; 
 padding：15px; 
 position：absolute; 
} 
  

这里是js：

  Tracker.autorun（function（）{
 ... 
 Conversations.find（conversationId）.observeChanges（{
 changed：function id，fields）{
 $（＃chat-messages）。scrollTop（$（＃chat-messages）。prop（scrollHeight））; 
} 
} ; 
}）; 
  

解决方案

每当我遇到Blaze没有有机会及时呈现一个Javascript函数被诱发的东西，我使用 Tracker.afterFlush 。这将等待，直到渲染周期完成之前运行一些代码，例如：

  //在Meteor事件回调中
 Tracker.afterFlush（function（）{
 var $ someItem = $（'....'）; 
 
 $（window）.scrollTop（$ someItem.offset ; 
}）; 
  

http://docs.meteor.com/#/full/tracker_afterflush

I'm writing a messenger application in Meteor, and I want to set it up such that when either user types a message it scrolls down to the bottom of the div for both of them. I am storing the message in a list called messages in a conversation document in the collection Conversations. I am using cursor.observeChanges, and it seems that the callback fires before the data is rendered on the client side so it doesn't scroll all the way to the bottom.

Here is the html:

<template name="chat">  
    {{> chatBox}}
</template>

<template name="chatBox">
    <div class="chat-box">
        <div id="chat-messages">
            {{#each chatMessages}}
                <div class="individual-message">
                    {{message}}
                </div>
            {{/each}}
        </div>
        <form id="chat-input">
            <input class="add-message" autocomplete="off" placeholder="Write something..." name="text" type="text">
      </form>
    </div>
</template>

Here's the relevant css:

#chat-messages {
    overflow-y: scroll;
    width: 250px;
    height: 450px;
    padding: 15px;
    position: absolute;
}

And here's the js:

Tracker.autorun(function(){
    ...
    Conversations.find(conversationId).observeChanges({
      changed: function(id, fields){
         $("#chat-messages").scrollTop($("#chat-messages").prop("scrollHeight"));
      }
    });
});

解决方案

Whenever I run into an issue where Blaze hasn't had a chance to render something in time for a Javascript function to be evoked on it, I use Tracker.afterFlush. This waits until the render cycle is done before running some code, e.g.:

// Inside a Meteor event callback
Tracker.afterFlush(function () {
  var $someItem = $('....');

  $(window).scrollTop($someItem.offset().top);
});

http://docs.meteor.com/#/full/tracker_afterflush

这篇关于当Meteor中添加数据时，如何滚动到div的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！