Scroll to bottom of div after ajax request code doesn't allow me to scroll back up

Question

I am trying to use a javascript code to scroll to the bottom of a div after an ajax request $("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight); but whenever I have this, it won't let me scroll back up becasue I have my javascript checking a php file every second to check if any new records are in a mysql database. This is my javascript

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

and my php file

<?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>';
}
?>

Anyone know how I can scroll to the bottom of the div after the new row has been found from the database, and then still be able to scroll to the top? Thanks in advance!

Answer 1

There are multiple things that you should not do:

First you use setInterval to reload the content.

If the server does not respond within the 10 milliseconds, or if the internet connection is slow, then you would end up in multiple active requests. This would result in an undefined behavior as a newer response could arrive later then later one or in a queue that will grow faster then they are processed.

The other thing is that you are chaining up fadeIn s on the #chatmessages with the speed of slow ( 600 ms ) so every 10 ms you queue up an animation of 600 ms .

So first of all you should only recheck for new messages when your previous request finished with success or fail , and you should then also either wait until the fadeIn animation finished or you should clear the animation queue.

You also should not load all messages, but only the new messages the are available. So eg send the ID of your last displayed message and only if there are new messages send those and append them to the #chatmessages div.

And an additional note: In your question you write [...]I have my javascript checking a php file every second to [...] but your code uses 10 ms for the setInterval . So either you don't show your actual code your you have choosen the wrong value for setInterval .