これについてはすでにstackoverflowの質問がありましたが、答えが適切ではなかったので、今回は別の製品について、別の方法で説明したいと思います。
まず、AJAX チャット メッセージをどのようにロードする必要があるでしょうか。
- 新しいメッセージがあるかどうかを確認するために数ミリ秒ごとに AJAX 要求を送信し、存在する場合はタイムスタンプを使用して新しいメッセージを読み込む必要がありますか? それとも、すべてのメッセージをリロードして、数ミリ秒ごとに div を新しいメッセージ リストに置き換えるだけですか?
問題
さて、私のチャットは現在、5,000 ミリ秒ごとにすべてのメッセージを読み込んでいます。そのため、新しいメッセージが投稿されてチャットがリロードされると、スクロールは同じ位置に留まり、新しいメッセージが下に表示されます。
ご覧のとおり、stackoverflow チャットでは、新しいメッセージが表示されると、どういうわけか自動的に上に移動し、どういうわけか新しいメッセージがチャットの下部にスライドし、古いメッセージはスクロールせずにその上に移動しますが、スクロールは大きくなります &上にスクロールして古いメッセージを表示できます。
汚い解決策 1:リロード時にスクロールを一番下までスクロールさせます。これは本当に面倒です。
最終的な解決策:ユーザーのスクロールが一番下にあるかどうかを確認し、そうであれば、新しいメッセージを読み込んですぐに下にスクロールします。スクロールがチャットの下部にない場合、チャットはスクロールダウンしません。
しかし、これらのソリューションは非常に悪いです。スタックオーバーフローチャットのようなことをしたいのですが、スクロールせずに新しいメッセージを完全にスライドさせます。
この問題の有効な解決策はありますか? この問題を抱えているのは私だけではないと思います。