AJAX Chat Box Scrolling Up Issue - php

Question

Hi I am writing a chat website and I have a problem with the div containing the messages. In the CSS the div containing the messages has overflow: auto; to allow scroll bars. Now the problem is when ajax is fetching the messages through a PHP script that fetches the messages from the database, you cannot scroll up. The AJAX refreshMessages() function is set to update every second using window.setInterval(refreshMessages(), 1000);. This is what I want but when I scroll up to see previous messages, the scroll bar hits straight back down to the end of the chat due to the AJAX fetch function.
Any ideas of what the issue is?
AJAX Code:
//Fetch All Messages
var refreshMessages = function() {
$.ajax({
url: 'includes/messages.inc.php',
type: 'GET',
dataType: 'html'
})
.done(function( data ) {
$('#messages').html( data );
$('#messages').stop().animate({
scrollTop: $("#messages")[0].scrollHeight
}, 800);
})
.fail(function() {
$('#messages').prepend('Error retrieving new messages..');
});
}
EDIT:
I'm using this code but it isn't quite working, it pauses the function but then the function doesn't restart when the scroll bar goes back to the bottom. Help?
//Check If Last Message Is In Focus
var restarted = 0;
var checkFocus = function() {
var container = $('.messages');
var height = container.height();
var scrollHeight = container[0].scrollHeight;
var st = container.scrollTop();
var sum = scrollHeight - height - 32;
if(st >= sum) {
console.log('focused'); //Testing Purposes
if(restarted = 0) {
window.setTimeout(refreshMessages(), 2000);
restarted = 1;
}
} else {
window.clearInterval(refreshMessages());
restarted = 0;
}
}

Answer 1

You need to replace the checkFocus() function to return true or false and then get AJAX to check if it need's to send the scroll bar down after adding in the new message or not. Replace the checkFocus() function with this:
//Check If Last Message Is In Focus
var checkFocus = function() {
var container = $('.messages');
var height = container.height();
var scrollHeight = container[0].scrollHeight;
var st = container.scrollTop();
var sum = scrollHeight - height - 32;
if(st >= sum) {
return true;
} else {
return false;
}
}
Change AJAX .done to this:
.done(function( data ) {
if(checkFocus()) {
$('#messages').html( data );
scrollDownChat();
} else {
$('#messages').html( data );
}
})

Answer 2

To answer your question of what's happening: the interval runs every second, and when you have scrolled up during that waiting period, it'll run again and move you down 800 pixels. You can remove this from your function to do this.
Since you're using overflow: auto, your chat box will grow and create a scrollbar when necessary. Have you tried removing the scroll functionality? Does it not move to the latest text at the bottom?
If not, then you can check if user has scrolled or not, when user has scrolled, you should not scroll using jQuery. To do this, you can add a variable outside this function which gets updated if user scrolls at all.
Detecting between user scrolling and your javascript scrolling is not easy, so you can use which message(s) is(are) being viewed. If the message in focus is the last message, you should keep scrolling to the bottom, but when the last message goes out of view, you can assume user has scrolled.
See this question for more info on detecting scroll: Detect whether scroll event was created by user