down - jquery: ¿evita que la ventana cambie de posición de desplazamiento al añadir elementos a una lista?

on scroll jquery

Question

Tengo una página que muestra mensajes y quiero que funcione igual que Facebook, pero sin el cargador vago. Los mensajes se muestran en orden cronológico, los últimos más recientes.

Mi lista de mensajes se rellena inicialmente con el número x de los mensajes más recientes, y la ventana se desplaza hacia abajo. Cuando el usuario comienza a leer el hilo, lee de abajo hacia arriba. Si llegan a la cima, pueden cargar más mensajes ... Los hago clic en un botón ... Facebook tiene un cargador perezoso. Los mensajes nuevos se adjuntan a la lista.

Problema: A medida que los nuevos mensajes se muestran en forma de ante, los mensajes existentes se desplazan hacia abajo, lo que hace que el usuario pierda su lugar de "visualización". ¿Cómo puedo mantener la posición actual de la vista del usuario cuando agrego los nuevos mensajes? Por ejemplo, abra una larga cadena de mensajes en Facebook, desplácese hasta la parte superior para agregar nuevos mensajes ... la ubicación de su vista no cambia aunque la posición de desplazamiento sí.

Answer 1

Acabo de encontrar una variación de esto. separé una gran cantidad de elementos, los procesé y luego los volví a adjuntar. esto no se completa de forma síncrona en Chrome, por lo que no pude establecer $ el.scrollTop (oldval) de manera confiable. Encontré esta solución funcionó para mí.

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

Answer 2

Almacene una referencia al primer mensaje antes de anteponer mensajes nuevos y, después de prepagar, establezca el desplazamiento al desplazamiento de ese mensaje:

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

Demostración: http://jsfiddle.net/GRnQY/

Edit : me di cuenta de que lo querías con un botón. Es posible que tengas que hacer un poco más de matemáticas:

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

Demostración: http://jsfiddle.net/GRnQY/5/

Answer 3

Aquí hay un truco simple que me funcionó:

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

Answer 4

Es posible que algunas personas que vienen aquí solo quieran agregar contenido sin que el enfoque actual salte. La modificación de la demostración de Jeff B que se muestra arriba para usar el objetivo de evento de clic hace que este idioma sea más portátil:

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

cf http://jsfiddle.net/bwz8uLvt/1/ (variante de la demostración de Jeff B anterior pero con el botón [agregar más] en un punto arbitrario de la página).

Answer 5

No hay necesidad de jQuery aquí, solo verifique los cambios en los elementos scrollHeight y ajuste el scrollTop en consecuencia, es decir:

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

Manifestación

http://jsfiddle.net/fkqqv28e/

jQuery

Para acceder al nodo DOM nativo desde una colección jQuery, use el acceso de matriz; es decir:

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;

Answer 6

También puede mantener la posición de desplazamiento en función del desplazamiento hacia la parte inferior de la página / elemento.

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

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

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