【Rails】最新投稿のメッセージがscrollボックス内一番下に常に表示される

2021.12.042021.08.23

目標物

このように、新規メッセージを投稿した際に最新投稿が常に一番下に表示されるようにする。

scrollのCSSを追加した場合、デフォルトでは、最上部が常に表示される。そのため、投稿したメッセージがscrollボックス外となり、かっこ悪い。

やることは2つ

このページを表示したときに最下部に表示したい
新規投稿したときに常に最新を最下部に表示したい

ページ表示したときに最下部に表示する


      <h4>コンタクト</h4>
      <p id="notice"><%= notice %></p>
      <div id="product_contacts_area">
        <%= render partial: 'product_contacts/index', locals: { product_contacts: @product_contacts, product:@product } %>
      </div>
      <div class="new_product_contact">
        <%= render partial: 'product_contacts/form', locals: { product_contact: @product_contact, product:@product } %>
      </div>


<script>
  $("#scroll-inner").scrollTop($("#scroll-inner")[0].scrollHeight);
</script>

ポイントはscriptタグ内！ここでjqueryを設定している。

#scroll-innerは以下に設定する。ポイントは、id=”scroll-inner”

<ul class="contact_box" id="scroll-inner">
  <% product_contacts.each do |product_contact| %>
    <% if product_contact.id.present? %>
      <li>
        <div class="product_contact_message" id ="this_product_contact_<%= product_contact.id %>"></div>
        <p>
          <strong><%= product_contact.user.name %></strong>
          <%= l product_contact.created_at %>
        </p>
        <p><%= product_contact.contact_message %></p>
        <% if (current_user == product_contact.user) || (current_user.name == "ゲスト") || (current_user.name == "ゲスト管理者") %>
          <div class="message_edit_delete">
          <%= link_to edit_product_product_contact_path(product, product_contact), remote: true do %>
          <i class="far fa-edit"></i>
          <% end %>
          <%= link_to product_product_contact_path(product_contact.product_id, product_contact.id), method: :delete, remote: true, data: { confirm: "本当に削除しますか?"} do %>
          <i class="far fa-trash-alt"></i>
          <% end %>
          </div>
        <% end %>
        <hr>
      </li>
    <% end %>
  <% end %>
</ul>

このスクロール部のボックスのCSSはこちら

.contact_box {
  padding: 20px;
  height: 350px;
  border: 1px solid rgb(201, 201, 201);
  overflow-y: scroll;
  border-radius: 1rem;
  background: white;
}

新規投稿したときに、最新を常に最下部に表示

投稿メッセージのindexエリアは以下にレンダリング

$("#product_contacts_area").html("<%= j(render 'product_contacts/index', { product_contacts: @product_contact.product.product_contacts, product: @product_contact.product }) %>");
$("#scroll-inner").scrollTop($("#scroll-inner")[0].scrollHeight);
$("textarea").val('');
$("#notice").html("<%= j flash[:notice] %>");

jsに置き換えるレンダリングファイル’product_contacts/index’は、上に記載しています。

このファイルにも同様にid=”scroll-inner”の指定をする。

これで完成！

参考