How can I prevent auto scroll when the user is manually scrolling?

Question

I am having a chat application in which the chat messages are shown in a div (id: messages_container)

On every 5 seconds, AJAX request-response appends new messages to messages_container. I have used code to auto scroll to the bottom of the div when new messages arrive.

This is the code I used:

$("#messages_container").prop({ scrollTop: $("#messages_container").prop("scrollHeight") });

If the user wants to see earlier messages, he scrolls up the div. The problem is that, while he is manually scrolling, the auto scroll works and then takes the user to the bottom of the div.

How can I prevent auto scroll while the user is manually scrolling? Do we have any scroll events?

Please help me.

Answer 1

You can check user scrolling like following and then use the scroll disable function like

//detect user scrolling or browser scrolling start  
var userScroll = false;     

function mouseEvent(e) { 
userScroll = true; 
} 

if(window.addEventListener) {
    document.addEventListener('DOMMouseScroll', mouseEvent,false); 
}


// detect browser/user scroll
$(document).scroll( function(){  
    console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
});
    //detect user scrolling or browser scrolling end

//this is for scroll disableing
window.onmousewheel = document.onmousewheel = function(e) {
   e = e || window.event;
   if (e.preventDefault)
   e.preventDefault();
   e.returnValue = false;
 };

For scroll disable reference http://ajax911.com/disable-window-scroll-jquery/