so i have this function which gets called using setInterval to update the chat box with new messages every 2.5 secs

 

the problem is the part that scrolls to the bottom of the div when i submit a new message , it works fine however because its getting called every 2.5 secs if a person is scrolling up the div with there mouse to look at old messages it will end up scrolling to the bottom automatically, how can i fix this? i've seen other examples where there doing the exact same thing and it gets called every 2 or 3 secs but they dont have this same problem. thanks in advance

 

function LoadLog(){
   var oldscrollHeight = $("#Chat_Box").attr("scrollHeight") - 20; //Scroll height before the request  
$.ajax({
 url:"./ajax/chat_update.php",  
 cache: false,
 success:function(html){
   //Update chat box
   $("#Chat_Box").html(html);	
   var newscrollHeight = $("#Chat_Box").attr("scrollHeight") - 20; //Scroll height after the request  
           if(newscrollHeight > oldscrollHeight){  
           $("#Chat_Box").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
           } 
   }
});

Edited February 29, 201214 yr by webdesigner93

You're already getting their current scroll height before the request. Couldn't you just do a quick check to see if they're at the bottom of the div or not. If they are; update and auto-scroll to the bottom, if they're not just update and leave their scroll where it is?

You're already getting their current scroll height before the request. Couldn't you just do a quick check to see if they're at the bottom of the div or not. If they are; update and auto-scroll to the bottom, if they're not just update and leave their scroll where it is?

 

mmm i got this now

 

var newscrollHeight = $("#Chat_Box").attr("scrollHeight") - 20; //Scroll height after the request  
     if ($("#Chat_Box").scrollHeight - $("#Chat_Box").scrollTop() == $("#Chat_Box").outerHeight()) {
           if(newscrollHeight > oldscrollHeight){  
           $("#Chat_Box").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
           } 
		}

 

the problem now is on the chat window of the person u sending the message to when they get that message it moves the scroll bar up a tad hiding part of the incoming message to them