使用Rails ActionCable创建实时聊天,但.scrollTop jQuery不起作用

在里面 javascripts/channels 我有这个 messages.js

该文件如下所示:

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>