【Rails】LINEのように送ったメッセージがチャット画面の一番下に表示される方法

はじめに

今回はLINEのように最新アイテムが一番下に追加されていくチャットのような画面で、
メッセージが追加されたら画面を自動で下までスクロールする方法について記述します。

記事をコピペしても使えるかと思います！

※前提でjQueryを使用しますので、そちらの導入をお願いいたします。
jQueryの導入：https://qiita.com/shunichfukui/items/d79f38a3af2715ffd218

開発環境

Ruby on Rails バージョン2.6.5

実装方法

①メッセージを表示させたいビューにidとCSSにoverflow: scroll;（スクロールさせるCSS）を記述
（※私の場合はBootstrapを導入しているので、classでスクロール指定）

<div class="overflow-auto" id="area">
　　メッセージが表示されるエリア
</div>

②jQueryを使用し、自動スクロールを設定（jsファイルに下記を記述）

window.onload = function() {
// ↪︎ windowがロードされた時にアクションを実行するように設定
  if (document.getElementById("area")) {
    // ↪︎ areaのIDがある場合に処理を実行させる（これがないとチャット画面がなくても常にJavaScriptが動いてしまいます）
    var scrollPosition = document.getElementById("area").scrollTop;
    // ↪︎ area要素のスクロールされた時の最も高い場所を取得
    var scrollHeight = document.getElementById("area").scrollHeight;
    // ↪︎ area要素自体の最も高い場所を取得
    document.getElementById("area").scrollTop = scrollHeight;
    // ↪︎ area要素のスクロールされた時の最も高い場所をarea要素自体の最も高い場所として指定してあげる
  }
}

終わりに／完成形

以上でLINEのように送信されたメッセージが要素の下に追加されても、
画面を自動スクロールしてくれます！

チャット画面の自動スクロールについては他にも様々な記述の方法がありますが、
自分としてはこの方法が最もシンプルでわかりやすかったため記述させていただきました！

皆様のご参考になれば幸いです。