使用Rails ActionCable创建一个即时聊天，但.scrollTop jQuery的不工作

Question

在javascripts/channels我有两个功能thismessages.js文件 - 1）将数据追加到视图，清除表单，并确保在div向下滚动显示最近发送的消息，以及2）该消息内容的帮手。

该文件是这样的：

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
  return $('#messages').append(this.renderMessage(data));
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我的问题是，该消息被追加，但没有被执行的scrollTop。为什么是这样？另外 - 如果我改变这个文件来js.erb并使用simple_format帮手，附完全避免。该数据仍然坚持和订阅的WebSockets发送和接收，但视图不追加到div底部的新信息更新。我应该在别处界定这种行为？视图看起来是这样的：

<div class="column">
 <div class="conversation" id="conversation-main">
  <div id="conversation-body" data-conversation-id="<%= @conversation.id %>">
   <div id="messages">
    <% @messages.each do |message| %>
     <% if message.body %>
      <%= render "message", message: message %>
     <% end %>
    <% end %>
   </div>
  </div>
 </div>
</div>

<div class="column">
 <div class="ui form"> 
  <%= form_for [@conversation, @message], remote: true do |f| %>
   <div class="field">
    <%= f.label :message %>
    <%= f.text_area :body, placeholder: "Your message", id:"response" %>
   </div>
   <%= f.submit "Submit" %>
  <% end %>
 </div>
</div>

Answer 1

要附加的消息，你scrollTop后。试着做

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $('#messages').append(this.renderMessage(data));
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我不相信你需要返回了第一个功能。但是你一定要知道div的高度，包括以看到滚动到信息输入后的div结束的最新消息。