チャット画面でLINEやDMのようにスクロールさせたい

Question

LINEやTwitterのDMのようなチャット画面で通常のWebページの場合はページの一番上がスクロール開始位置になると思うのですが、チャット画面では一番下がスクロール開始位置になって上にスクロールしていくと過去のメッセージに遡れると思うのですがこのようなUIはどのように実装するのでしょうか。
また新しいメッセージを送信したときにメッセージのdivが下に追加されるのですがどのようにして新しいメッセージを追加したときに自動的に画面を一番下にスクロールさせるのしょうか。
伝わりにくいかもしれませんが教えていただけると幸いです

  <header class="header">
    <div class="chatPartner">
      <div class="dm-username">USER_NAME</div>
      <div class="dm-userid">USER_ID</div>
    </div>
  </header>
<div class="messagesArea messages" id="scroll-inner">
<div class="area">
<div class="message"　id="parent">
 <img src="icon" class="message-icon"> 
 <div class="chatUserName">USERNAME</div>
 <a class="time-hover">
 <span class="dm-p">TIME 前</span>
 <span class="hover-time">TIME</span>
 </a>
 <div class="commonMessage">
 <div>MESSAGE</div>
</div>
</div>
<hr class="messageline">
</div>
</div>
  <div class="text-box">
  <form class="messageInputForm">
    <div class="messenger">
      <textarea type="text" data-behavior="room_speaker" class="messageInputForm_input" placeholder="メッセージを入力..."></textarea>
    </div>
  </form>
  </div>
</div>
</div>

.header {
    padding: 7px;
    background: var(--heading-color);
    color: var(--primary-color);
    height: 57px;
    box-sizing: border-box;
    border-bottom: solid 1px var(--border-color);
}
.messagesArea {
    overflow-y: scroll;
    height: calc(100% - 8pc);
}
.message {
    margin: 10px;
}

※CSSは一部省略しています。

Answer 1

知っている範囲で答えます。

1: スクロール開始位置を一番下にする方法
overflow属性を追加したコンポーネント(この場合は<div class="messagesArea messages" id="scroll-inner">の部分)に対してscrollTop = scrollHeightとします。

function scrollToEnd() {
  const messagesArea = document.getElementById('scroll-inner');
  messagesArea.scrollTop = messagesArea.scrollHeight;
}

この関数を呼ぶとスクロールバーが一番下に設定されます。ページ読み込み時とかメッセージ送信時に呼ぶとかするといいのではと思います。(アニメーションなどは考慮していません)
なおこの実装では「常に下側に要素が来る」つまり「要素を下ぞろえにする」ことはできません。
もしそうしたい場合はflexboxを使ってどうこうするか、あるいはスクロール領域分のheightをもった空のdivを追加して疑似的に下ぞろえに見せるなどが考えられます。
この辺はご自身で調べてみてください。

2: 新しいメッセージを送信したとき自動でスクロールする方法
単純にメッセージ送信時に上のscrollToEnd()を呼ぶだけでいいです。
もしそれ以外でメッセージが追加される可能性があって、自動でdivの追加を監視してスクロールしたいというのであれば、MutationObserverを使えばよいと思います。仮に"scroll-inner"の直下にメッセージを追加する場合以下のようになります。この場合メッセージ送信時にscrollToEnd()を呼ぶ必要はありません。

  //監視する対象(この場合は"scroll-inner")
  var renderer = document.getElementById("scroll-inner");
  //要素が変化したときの処理を書く(この場合は下までスクロール)
  const observer = new MutationObserver((render) => {
    scrollToEnd();
  });
  //監視する条件を書く
  //この場合、"scroll-inner"に子要素が追加されたとき
  observer.observe(renderer, {
    childList: true,
  });