LLMが回答し始めたら、ユーザーがスクロールに絶対逆らえない

[KorRyu3]

_Originally posted by @KorRyu3 in https://github.com/KorRyu3/TriPal/pull/25#discussion_r1484107780_

問題点

LLMが回答し始めると、自動スクロールが始まる。 しかし、それが始まるとユーザーが自由にスクロールできなくなる。

理想の動作

• LLMから回答が来た時、画面の一番下らへんに行ったら、自動でスクロールされる。
• ただし、ユーザーはいつでもその自動スクロールから抜け出せて、自由に移動可能

[nka21]

@KorRyu3 できた👍 わざわざテストしなくとも、動画の方が楽だろうなと、この前のまるくんの見て思ったから はじめてmacで録画してみたけど、録画方法楽だな！

// ユーザーがスクロールしたかどうかを追跡するフラグ
let userScrolled = false;

// チャットコンテナのスクロールイベントリスナーを追加
document.getElementById("chatBox").addEventListener("scroll", function () {
  // ユーザーがスクロールした場合は、自動スクロールを無効にする
  // ユーザーが最下部にスクロールしたかどうかを確認するための式
  // +1しているのは計算の精度を上げ、最下部に非常に近い場合にもtrueを返すため
  userScrolled = this.scrollTop + this.clientHeight + 1 < this.scrollHeight;
});

// 新しいメッセージが追加された際に自動スクロールする関数
function handleNewMessage() {
  // ユーザーがスクロールしていない場合のみ自動スクロールを実行
  if (!userScrolled) {
    // チャットコンテナを取得
    var chatContainer = document.getElementById("chatBox");
    // 最後のメッセージ要素を取得
    var lastMessage = chatContainer.lastElementChild;
    if (lastMessage) {
      // 最後のメッセージの位置を取得
      var lastMessageRect = lastMessage.getBoundingClientRect();
      // チャットコンテナの高さ
      var containerHeight = chatContainer.clientHeight;
      // チャットコンテナ内のスクロール量
      var scrollTop = chatContainer.scrollTop;
      // 最後のメッセージが表示されるように自動スクロール
      if (lastMessageRect.bottom > containerHeight) {
        chatContainer.scrollTo({
          top: scrollTop + lastMessageRect.bottom - containerHeight,
          behavior: "smooth", // スムーズなスクロール
        });
      }
    }
  }
}

https://github.com/KorRyu3/TriPal/assets/133028205/91dcc42d-bf40-4858-89ed-33233d844a2c

[KorRyu3]

フラグとイベントリスナーで追跡してるのか。なるほどなぁ

@nka21 因みにそれは何を参考に作ったの？ varとかあるから、古い記事を参照したのかな？