Ajax チャット アプリケーションで Div を一番下までスクロールしたままにする方法は?

Scroll to Bottom of Div?

Ajax リクエストを使用して対話型チャット アプリケーションを構築する場合、一般的な課題は、メッセージ div が自動的に新しいメッセージが到着すると一番下までスクロールします。この記事では、この問題に関連する 2 つの重要な質問について説明します:

1. JavaScript を使用してデフォルトで Div を一番下までスクロールし続ける方法

ユーザーのアクションに依存せずに div を一番下までスクロールし続けるには、次の JavaScript コードを使用します:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

このコードは、ID「your_div」の要素を表す変数 objDiv を定義します。次に、この要素のscrollTopプロパティをscrollHeightに設定します。これにより、スクロールバーが効果的に一番下の位置に移動します。

2. Ajax リクエストの後に Div を一番下までスクロールしたままにする方法

Ajax リクエストの後でも希望のスクロール位置を維持するには、Ajax リクエストの成功コールバック関数内で質問 1 の JavaScript コードを実行します。以下に例を示します。

$.ajax({
  url: "messages.php",
  success: function(data) {
    var objDiv = document.getElementById("messages");
    objDiv.scrollTop = objDiv.scrollHeight;
  }
});

この例では、「messages.php」への Ajax リクエストが成功すると、「messages」div 内の HTML コンテンツが更新されます。後続の JavaScript コードは、スクロール位置を div の一番下に調整します。

以上がAjax チャット アプリケーションで Div を一番下までスクロールしたままにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。