Ajax請求代碼不允許我向上滾動后，滾動到div的底部

Question

我正在嘗試使用JavaScript代碼在ajax請求$("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight);之后滾動到div的底部$("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight); 但是每當我有它時，它就不會讓我向上滾動，因為我讓我的JavaScript每秒檢查一次php文件，以檢查mysql數據庫中是否有新記錄。 這是我的JavaScript

var auto_refresh = setInterval(function (){$('#chatmessages').load('ajax.php').fadeIn("slow"); } , 10);

和我的PHP文件

<?php
$con = mysqli_connect('localhost','root','','chat');
$query = mysqli_query($con,"SELECT * FROM `messages`");
while ($row=mysqli_fetch_assoc($query)) {
        echo '<div class="chat-replies">
                                <div class="chat-reply-container">
                                        <div class="chat-reply-avatar">
                                                <img src="img/default_avatar.png">
                                        </div>
                                        <div class="chat-reply-chat">
                                                <span class="chat-reply-author">',$row['user'],'</span><br>
                                                <span class="chat-reply-content">',$row['message'],'</span>
                                        </div>
                        </div>
                                </div>';
}
?>

有誰知道在數據庫中找到新行后如何滾動到div的底部，然后仍然能夠滾動到頂部？ 提前致謝！

Answer 1

您不應該執行多項操作：

首先，您使用setInterval重新加載內容。

如果服務器在10毫秒內沒有響應，或者Internet連接速度很慢，那么您將最終收到多個活動請求。 這將導致未定義的行為，因為較新的響應可能會晚於隨后到達，或者在隊列中增長得更快，然后處理它們。

另一件事是，您正在以slow （ 600 ms ）的速度鏈接fadeIn上的#chatmessages ，因此每10 ms您將600 ms的動畫排隊。

因此，首先，您應該僅在上一個請求成功完成或失敗時重新檢查是否有新消息，然后還應該等到fadeIn動畫完成或清除動畫隊列。

您也不應加載所有消息，而只能加載新消息。 因此，例如，發送您最后顯示的消息的ID，並且僅當有新消息發送時，才將其發送並將其附加到#chatmessages div中。

而附加的注釋：在你的問題你寫[...]I have my javascript checking a php file every second to [...]但你的代碼使用10 ms為單位setInterval 。 因此，要么您沒有顯示實際代碼，要么為setInterval選擇了錯誤的值。