jquery-сохранить окно от изменения положения прокрутки при добавлении элементов в список?

У меня есть страница, которая отображает сообщения и я хочу, чтобы работать так же, как Facebook, но не ленивый грузчик. Сообщения отображаются в хронологическом порядке, последние последние.

мой список сообщений изначально заполняется x числом последних сообщений, и окно прокручивается вниз. Когда пользователь начинает читать потоком, они читают снизу вверх. Если они доберутся до вершины, то смогут загрузить больше сообщений... Я заставляю их нажать кнопку... facebook имеет ленивый погрузчик. К списку добавляются новые сообщения.

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

25
jquery list prepend scroll window

6 ответов

Сохраните ссылку на первое сообщение перед добавлением новых сообщений, а после добавления установите для прокрутки значение смещения этого сообщения:

$(document).on('scroll', function() {
    var scroll = $(document).scrollTop();
    if (scroll < 1) {
        // Store eference to first message
        var firstMsg = $('.message:first');

        // Prepend new message here (I'm just cloning...)
        $('body').prepend(firstMsg.clone());

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

демо:http://jsfiddle.net/GRnQY/

редактировать: я заметил, что вы хотели его с кнопки. Возможно, вам придется сделать немного больше математики:

$(document).on('click', '#loadMore', function() {
    var firstMsg = $('.message:first');

    // Where the page is currently:
    var curOffset = firstMsg.offset().top - $(document).scrollTop();

    // Prepend
    firstMsg.before(firstMsg.clone());

    // Offset to previous first message minus original offset/scroll
    $(document).scrollTop(firstMsg.offset().top-curOffset);
});

демо:http://jsfiddle.net/GRnQY/5/

44

нет необходимости в jQuery здесь, просто проверьте изменения в элементах scrollHeight и отрегулируйте scrollTop соответственно, т. е.:

var lastScrollHeight = el.scrollHeight;
for(var n=0; n<10; n++){
    // Prepend here...
}
var scrollDiff = el.scrollHeight - lastScrollHeight;
el.scrollTop += scrollDiff;

демо

http://jsfiddle.net/fkqqv28e/

jQuery

чтобы получить доступ к собственному узлу DOM из коллекции jQuery, используйте array access; ie:

var lastScrollHeight = $('#myElement')[0].scrollHeight;
for(var n=0; n<10; n++){
    $('#myElement').prepend('<div>prepended '+Math.random()+'</div>');
}
var scrollDiff = $('#myElement')[0].scrollHeight - lastScrollHeight;
$('#myElement')[0].scrollTop += scrollDiff;
6

некоторые люди, приходящие сюда, могут просто захотеть добавить контент без текущего фокуса. Изменение демо Джеффа B выше, чтобы использовать цель события click, делает эту идиому более переносимой:

someButton.on('click', function() {
    var curOffset = $(this).offset().top - $(document).scrollTop();
    // add content to your heart's content.
    $(document).scrollTop($(this).offset().top-curOffset);
});

c.f. http://jsfiddle.net/bwz8uLvt/1/ (вариант демонстрации Джеффа Б выше, но с кнопкой [добавить больше] в произвольной точке страницы).

2

Я только что столкнулся с вариацией этого. я отсоединил большое количество элементов, обработал их и снова присоединил. это не завершается синхронно в Chrome, поэтому я не мог установить $el.scrollTop(oldval) надежно. Я обнаружил, что это решение сработало для меня.

// get old scroll top of '#sub_elem'
oldScrollTop = $('#sub_elem).scrollTop();

// detach
$els = $('#sub_elem').detach();

// complex processing on #sub_elem
// goes here

// attach
$('#main_el').attach($els);

// problem- always scrolls #sub_elem back to the top
// attempt #1: $('#sub_elem').scrollTop(oldScrollTop); // fails on mac Chrome
// attempt #2: use instant animation.  this works on mac Chrome
if (oldScrollTop) {
    $('#sub_elem').animate({
        scrollTop: oldScrollTop
    }, 0);
}
0

вы также можете сохранить положение прокрутки на основе смещения в нижней части страницы / элемента.

var ScrollFromBottom = $(document).height() - $(window).scrollTop();

//ajax - add messages -- geenrate html code then add to dom

//set scroll position
$(window).scrollTop($(document).height() - ScrollFromBottom);
0

вот простой трюк, который сработал для меня:

// divWithTheScroll.prependElement...
divWithTheScroll.scrollTop += newlyPrependedElement.scrollHeight;
0