jQuery AJAX呼び出しを使用すると、scrollTop（）関数が最も最近の項目にスクロールします。

Question

私のウェブサイトのメンバーが使用する簡単なチャットページを構築しています。このページは現在生産中です。今は、ユーザーがメッセージを送信したときに新しいチャットメッセージのみをチェックするように設定されています。 $ .ajax呼び出しを含むjQuery関数の一部として、私はStackOverflowコミュニティによって提案されたコードのスニペットを使用して、チャットを含むdivの下にスクロールしましたが、このコードは " $ .ajax呼び出し。私のHTMLはここにある：

$('#chat-input').submit(function() { 
      var new_chat = $('textarea[name=message]').val();//gets the value of the message box to send 
      var most_recent_chat = $('.chat-item:last-child').attr('data-chat-id');//gets the id# of the last chat 
      $.ajax({ 
       url: "/docs/chat/chat.php", 
       dataType: 'html', 
       type: "post", 
       data: { 
        new_chat: new_chat, 
        most_recent_chat: most_recent_chat, 
        new_sender: new_sender //Declared globally elsewhere 
       }, 
       success: function(data) { 
        $('#chat').append(data); 
       }, 
        error: function(jqXHR, exception) { 
        //switch containing various errors 
        }   
       } 
      }); 

      var divHeight = document.getElementById('chat').scrollHeight; 
      $('div#chat').scrollTop(divHeight); 
      document.getElementById('message').value=''; 
      event.preventDefault(); 
     }); 

私のPHPスクリプトは、この情報（起動時に簡単にするために代わりにJSONのHTMLでのI出力を出力 - でJSON出力にアップグレードします：

<div id="chat"> 

</div> 

<form id="chat-input"> 
    <textarea form="chat-input" id="message" name="message" placeholder="Type your message here..." autofocus></textarea> 
</form> 

これは私のjQueryのです後日）：

<div class="chat-item" data-chat-id="(int)">//each chat has a unique id so that my php processing page only returns new chats 
<p class="chat-message"><strong>(sender-name): </strong>(chat message)</p> 
<p class="chat-time">(time of message)</p></div> 

今、私の正確な問題です。チャットメッセージを送信すると、$ .ajaxコールがうまく動作します。私のメッセージは到着し、#chat divに正しく追加されています。しかし、これらのコード行は面白い動作：

var divHeight = document.getElementById('chat').scrollHeight; 
$('div#chat').scrollTop(divHeight); 

マイ#chatのdivが400ピクセルの固定の高さを持っており、オーバーフローをスクロールするように設定されています。他の多くのスタックオーバーフローに関する質問は、上記のコードが#chat divを下にスクロールしたままにしておくことを示唆していました。 $ .ajax呼び出しの後に.scrollTopを下に設定するのではなく、$ .ajax呼び出しの前に.scrollTopを設定しているようです（つまり、2番目から最新のチャットが最も最近のチャットが存在するが、スクロールされていないdivの下部）。コードは.submit（）関数の一部ですが、$ .ajax呼び出しの後にあります。 jQueryが一番下までスクロールしたときに新しいチャットメッセージを挿入するようにコードを変更するにはどうすればよいですか？

この場合、私はPHP v5.3でAMPPS v3.5を使用しています（Webホストはまだ5.3を使用しています）。私はFirefox 46.0.1でテストしています。

Answer 1

Ajax呼び出しは非同期です。つまり、呼び出しが保留されている間に、その下のコードが実行されます。

したがって、scrollTopコールはajax.successコールの前に実行されます。

ajax呼び出しが応答を受け取った後にスクロールを実行するには、successコールバックにスクロールを含めます。