AJAX Chat-автоматически перетащите прокрутку вниз, но не перетаскивайте ее, когда пользователь прокручивает вверх?

вы знаете, как это большинство чатов, прокрутка идет вниз, когда появляется новое сообщение. Мой чат перезагружается каждые 5000 мс,а затем перетаскивает прокрутку вниз 300 мс.

но я хочу сделать это, поэтому, когда пользователь перетаскивает прокрутку вверх, перетаскивание прокрутки не повлияет на него. Есть ли функция для заполнения переменной, например draggedScroll = true после прокрутки пользователем?

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

это чат, а как вы видите, если вы подниметесь, он будет перетаскивать вас каждые 5000ms вниз, и я хочу предотвратить это только тогда, когда пользователь прокручивает вверх. и если пользователь снова прокрутил вниз [0], он сделает draggedScroll = false, поэтому он снова повлияет на него.

Как мне это сделать?

проблема не решена!

проблема объяснения:

свиток только работа если в высота свитка будет не менее 1500px (scrollTop(1500)) (34 сообщения в чате).

Если это ниже, прокрутка не будет работать и будет прокручиваться при новом сообщении.

9
jquery scroll

4 ответов

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

в основном то, что я сделал там, я взял текущее положение свитка и добавил к нему 470 px (так как он всегда будет ниже всей высоты).

а затем проверьте, является ли новая высота

если да, то прокрутите вниз. остальные останутся на той же позиции.

5

у меня была проблема, и вот как я ее решил:

  1. привязка к scroll событие соответствующего контейнера
  2. внутри обработчика событий считывается:
    • $(element).scrollTop()
    • $(element).prop('scrollHeight')
    • $(element).height()
  3. полоса прокрутки находится внизу, когда scrollTop == scrollHeight - height
  4. если условие true: включить автоматическую прокрутку, отключить ее в противном случае.
  5. при необходимости вычтите какой-то запас, чтобы улучшить пользовательский интерфейс (см. мое решение)

мое решение (написано в 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

проверьте на element.scrollTop. Если он равен element.scrollHeight - element.height выполните прокрутку, иначе не прокручивайте.

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

просто установите флаг, пока полоса прокрутки isdraged, например:

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
   }
}

обновление: правильно, проверка bScroll

1