AJAX Chat - Automatically drag the scroll down, bu

Question

You know how it most of the chats, the scroll goes down, when a new message appears. My chat reloads every 5000 ms, and then drags the scroll down 300ms after.

But I want to make it, so when user drags the scroll up, the scroll drag won't affect him. Is there a function, to fill a variable like, draggedScroll = true once the user scrolled up?

http://driptone.com/jony/applications/chat/index.php

this is the chat, and as you see, if you go up, it will drag you every 5000ms down, and I want to prevent it ONLY when the user scrolls up. and if the user has scrolled to the bottom [0] again, it will make draggedScroll = false, so it will affect him again.

How do I do that?

Problem hasn't been solved!

Problem explanation:

The scroll will only work IF the height of the scroll will be at-least 1500px (scrollTop(1500)) (34 messages in chat).

If it is below that, scroll will not work, and will scroll up upon new message.

Answer 1

I had the problem myself and this is how I solved it:

1. Bind to the scroll event of the appropriate container
2. Inside the event handler read out:
   • $(element).scrollTop()
   • $(element).prop('scrollHeight')
   • $(element).height()
3. The scrollbar is at the bottom when scrollTop == scrollHeight - height
4. If the condition is true: enable automated scrolling, disable it otherwise.
5. If needed subtract some kind of margin to improve user experience (see my solution)

My solution (written in CoffeeScript)

$('#messageContainer').on('scroll', function(event) {
  var element, height, scrollHeight, scrollTop;
  element = $(this);
  scrollTop = element.scrollTop();
  scrollHeight = element.prop('scrollHeight');
  height = element.height();
  if (scrollTop < scrollHeight - height - 25) {
    disableScroll();
  }
  if (scrollTop > scrollHeight - height - 10) {
    return enableScroll();
  }
});

Answer 2

function reload() {
    var oldscrollHeight = ($("#chat").scrollTop() + 470);
    console.log(" old: " + oldscrollHeight);
    $.post("ajax.php", { loadMessages : "1" }, function(data) {
        $(".discussion").html(data); 
        var newscrollHeight = $("#chat").prop("scrollHeight");
        console.log(" new: " + newscrollHeight);
        if(newscrollHeight < (oldscrollHeight + 150)) {
            var height = $('#chat')[0].scrollHeight;
            $('#chat').scrollTop(height);
        }           
    });     
}

Basically what I did there, I took the current position of the scroll, and added 470 px to it (since it will always be lower than the whole height).

And then check, if the new height, is < than the old height + 150px.

If yes, then scroll down. else stay on same position.

Answer 3

Have a check on the element.scrollTop. If it is equal to the element.scrollHeight - element.height do the scrolling, else do not scroll.

element = $("#chat")[0];
if (element.scrollTop == element.scrollHeight - element.height)
    element.scrollTop(element.scrollHeight);

Answer 4

Just set a flag while scrollbar isdraged, like:

var bScroll = true; // My flag for true = scrolling allowed, false = scrolling prevented

$('#scrollbar').focus(function(){ bScroll = false; );
$('#scrollbar').focusOut(function(){ bScroll = true; );

function scroll(){
   if(!bScroll){ 
        return false
   }
}

UPDATE: right, checking bScroll