AJAX Chat - Automatically drag the scroll down, bu

问题:

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.

回答1:

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.

回答2:

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();
  }
});

回答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);

回答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