CSS: chatのクラス内が常に一番下にスクロールされている状態にしたい。

Question

#実現したいこと
メッセージが追加される度に.chatの一番下にスクロールされるようにしたい。

困っていること
メッセージが追加される度についてはボタンをクリックに対してonclickを発火させればいいのかなと思うのですがどのようにしたら一番下にスクロールされるかが分からなくて困っています。

html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
body {
  /*タッチデバイスやmacでスクロールされないようにする*/
  overflow: hidden;
  position:absolute;
}
.chatArea {
  bottom: 0;
  overflow:scroll;
}

<h1>Chat Room</h1>
<div class="container">
  <div class="row mt-4">
    <div class="col-10 offset-1 bg-info">
      <div class="chatArea" id="chat_space">
        <p>ほげ</p>
        <p>hoge</p>
        <p>ホゲ</p>
         ....
      </div>
    </div>
  </div>
  <div class="col-10 offset-1">
    <form id="test_form" class="border">
      <input type="file" id="picture" class="col-6">
      <input type="button" value="送信" class="" id="chat">
      <textarea id="content" class="form-control border-0"></textarea>
    </form>
  </div>
</div>

#追記

document.getElementById("chat").onclick = function() {
  // ここに#buttonをクリックしたら発生させる処理を記述する
  var obj = document.getElementById('chat_space');
  obj.scrollTop = obj.scrollHeight;
  // obj.scrollHeight - obj.clientHeight;
  window.scroll(0, y);
};

補足:使用技術
bootstrap4

Comments

[kei344]

「これでスクロールできるようになった。」なら問題は無いのでは。

[nanase21]

コメントしていただきありがとうございます。
返信遅くなり申し訳ございません。
質問の内容を変更いたしましたので、もしおわかりであればご教示いただけると幸いです。

Answer 1

スクロールのコントロールはJavaScriptを使用しないとコントロールできないと思います。
（要素のスクロール位置をJavaScriptならコントロール可能です）

Comments

[kei344]

writing-modeとかを無理やり駆使したら出来るかもしれませんが。

[nanase21]

ご教示いただきありがとうございます。
javascriptでonclickを指定し、送信をクリックした時に#chat_spaceに対して、スクロールされるようにしてみたのですが、うまく行きませんでした。
コードの問題なのか、Bootstrapを使用しているためにcssがバッティングしてスクロールができないのかはわからないのですが、もし何が原因なのかおわかりであればご教示いただけないでしょうか？

[kei344]

window.scroll(0, y);でスクロールしようとされていますが、CSSでスクロールしないようにされています。スクロールできる要素で、内包要素もスクロールするコンテンツ量がないと「動き」がわかりにくいと思います。

【element.scrollTop - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop

【スクロールの位置（量）を取得・設定 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/get-scroll-position.php