Czat AJAX - Automatycznie przeciągnij przewijanie w dół, ale nie przeciągaj go, gdy użytkownik przewija w górę?

Question

Wiesz, jak to się dzieje podczas większości czatów, przewijanie jest w dół, kiedy pojawia się nowa wiadomość. Mój czat ładuje się co 5000 ms, a następnie przeciąga zwoje o 300 ms.

Ale chcę to zrobić, więc gdy użytkownik przeciągnie przewijkę w górę, przeciągnięcie przewijania nie wpłynie na niego. Czy istnieje funkcja, aby wypełnić zmienną taką jak, draggedScroll = true, gdy użytkownik przewinie się w górę?

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

to jest czat, i jak widać, jeśli idą w górę, to ci co 5000ms przeciągnąć w dół, a ja chcę, aby zapobiec tylko wtedy, gdy użytkownik przewija się. i jeśli użytkownik przewinął ponownie do dołu [0], spowoduje to, że draggedScroll = false, więc wpłynie to na niego ponownie.

Jak to zrobić?

Problem nie został rozwiązany!

Problem wyjaśnienie:

Zwój tylko praca IF wysokość zwoju będzie co-najmniej 1500px (scrollTop (1500)) (34 wiadomości na czacie) .

Jeśli poniżej, przewijanie nie zadziała i będzie przewijane w górę po pojawieniu się nowej wiadomości.

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

Zasadniczo to, co zrobiłem, wziąłem aktualną pozycję zwoju i dodałem do niego 470 px (ponieważ zawsze będzie ona niższa od całej wysokości).

A następnie sprawdź, czy nowa wysokość to < niż stara wysokość + 150px.

Jeśli tak, przewiń w dół. w przeciwnym razie pozostanie na tej samej pozycji.

Answer 2

Sprawdź na element.scrollTop. Jeśli jest równa element.scrollHeight - element.height, przewiń, inaczej nie przewijaj.

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

Answer 3

miałem problemu siebie i to w jaki sposób rozwiązać go:

1. Bind do zdarzenia scroll odpowiedniego pojemnika
2. Wewnątrz obsługi zdarzeń odczytane:
   • $(element).scrollTop()
   • $(element).prop('scrollHeight')
   • $(element).height()
3. Pasek przewijania znajduje się na dole po scrollTop == scrollHeight - height
4. Jeśli warunek jest true: umożliwienie automatycznego przewijania, wyłącz ją inaczej.
5. W razie potrzeby odejmowania jakiś margines poprawy doświadczenia użytkownika (patrz moje rozwiązanie)

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 4

Wystarczy ustawić flagę podczas przewijania isdraged, jak:

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: prawy, sprawdzanie bScroll