jquery scroll bottom to top, preand и ajax

Question

Мне нужна помощь в создании конечного прокрутки снизу вверх. Что-то вроде сообщений facebook.

Я проверил вопрос this, но, похоже, не работает для меня так, как он предполагал. Проблема в том, что когда я добираюсь до вершины div и конца списка сообщений, он прокручивается вниз, и я не вижу первые несколько сообщений. Как прекратить это?

А также, когда новые сообщения добавляются, существующие сообщения сдвигаются вниз, заставляя пользователя потерять свое «просматриваемое» место.

Вот что у меня есть:

$(document).ready(function(){ 

$('#message_board').scrollTop($('#message_board')[0].scrollHeight); 

}); 

$('#message_board').on('scroll', function() { 
    var scroll = $('#message_board').scrollTop(); 
    if (scroll == 0) { 
     // Store eference to first message 
     var firstMsg = $('.bubble-left:first, .bubble-right:first'); 

     // Prepend new message here 
     var content; 
     $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){ 
      content= data; 
      $('#message_board').prepend(content); 
      }); 

     // After adding new message(s), set scroll to position of 
     // what was the first message 
     $('#message_board').scrollTop(firstMsg.offset().top); 
    } 
}); 

Answer 1

ваша проблема здесь

$('#message_board').scrollTop(firstMsg.offset().top); 

вы можете попробовать это вместо

$('#message_board').scrollTop(1); 

или пытаться комментировать эту строку кода

//$('#message_board').scrollTop(firstMsg.offset().top); 

, но я думаю, вы должны использовать scrollTop после препенда()

$('#message_board').prepend(content).promise().done(function(){ 
    $(this).scrollTop(1); 
}); 

наконец .. добавить определенный класс к элементам, которые вы хотите предварять его и scrollTop на деление до последнего элемента с этим именем класса и после препенда() использовать removeClass(), чтобы удалить этот класс снова

$('#message_board').on('scroll', function() { 
    var scroll = $('#message_board').scrollTop(); 
    if (scroll == 0) { 
     $(this).prepend(content).promise().done(function(){ 
      $(this).scrollTop($('.newAppend:last').offset().top); 
      $('.newAppend').removeClass('newAppend'); 
     }); 
    } 
}); 

Demo here

Примечание: обернуть весь код внутри $ (документ) .read y (function() {// все ваш код здесь});

Answer 2

Обязательно прокрутите страницу после того, как сообщение было добавлено.

$ .get принимает обратный вызов, который выполняется после получения ответа от сервера.

Вы также должны переместить .scrollTop, так как вы хотите выполнить эту функцию после добавления содержимого внутри обратного вызова. Поскольку все, что за пределами обратного вызова, обычно выполняется до этого обратного вызова.

Что-то вроде этого:

$(document).ready(function(){ 
    $('#message_board').scrollTop($('#message_board')[0].scrollHeight); 

    }); 

    $('#message_board').on('scroll', function() { 
    var scroll = $('#message_board').scrollTop(); 

    if (scroll == 0) { 
     // Store eference to first message 
     var firstMsg = $('.bubble-left:first, .bubble-right:first'); 

     // Prepend new message here 
     var content; 

     $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){ 
     content= data; 
     $('#message_board').prepend(content); 

     // After adding new message(s), set scroll to position of 
     // what was the first message 
     $('#message_board').scrollTop(firstMsg.offset().top); 
     }); 
    } 
}); 

Answer 3

Итак, я, наконец, понял это. Что-то останавливало событие $('#message_board').scrollTop(firstMsg.offset().top-curOffset);. Я пробовал .unbind и .off, он никогда не работает. Итак, что я сделал, добавляется эта строка в атрибут ajax success.

$(document).ready(function(){ 
     $('#message_board').scrollTop($('#message_board')[0].scrollHeight); 
    }); 

$('#message_board').on('scroll', function() { 
    var scroll = $('#message_board').scrollTop(); 
    if (scroll < 1) { 
     // Store eference to first message 
     var firstMsg = $('.bubble-left:first, .bubble-right:first'); 
     var curOffset = firstMsg.offset().top - $('#message_board').scrollTop(); 
     // Prepend new message here 
     var content; 
     $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){ 
      content= data; 
      $('#message_board').prepend(content); 
      $('#message_board').scrollTop(firstMsg.offset().top-curOffset);// <<---- Had to add this event to the ajax success function 
      }); 
    } 
});