jquery - jquery - garder la fenêtre de modification de la position de défilement tout en ajoutant des éléments à une liste?

51

Stocker une référence pour le premier message avant d'ajouter de nouveaux messages, et après vous ajouter, définir le faites défiler jusqu'à l'offset de ce message:
```
$(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);
    }
});
```
Démo: http://jsfiddle.net/GRnQY/

Modifier: j'ai remarqué que tu voulais avec un bouton. Vous pourriez avoir à faire un peu plus de maths:
```
$(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);
});
```
Démo: http://jsfiddle.net/GRnQY/5/
- La deuxième solution est GÉNIAL - merci beaucoup, cela a été très utile pour la mise en œuvre du "reverse infinite scroll" à la Facebook messages.
- Si vous êtes en utilisant ajax, ajouter $(selector).scrollTop(firstMsg.offset().top-curOffset); sur l'ajax success attribut pour le défilement fonctionne correctement
- Génial! Merci Jeff!
- Certaines personnes de venir ici sera probablement juste envie de cliquer sur un bouton sans le bouton se déplacer. Pour cela, des calculs à l'aide firstMsg.offset() peut insetad utiliser l'élément cible de l'événement click, faisant de cet extrait de code plus portable: var curOffset = $(this).offset().top - $(document).scrollTop(); /* do stuff above the button */ $(document).scrollTop($(this).offset().top-curOffset); c.f. <jsfiddle.net/bwz8uLvt/1> (ci-dessus démo, mais avec un bouton à l'arbitraire de la place dans la page)
- votre 2ème solution est vraiment super! merci, je suis encore à essayer de comprendre pourquoi cela fonctionne de cette façon.
- Excellente solution. merci u beaucoup.
InformationsquelleAutor Jeff B

Pas besoin de jQuery ici, il suffit de vérifier les changements dans les éléments scrollHeight et ajuster la scrollTop en conséquence, c'est à dire:

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

Démo

http://jsfiddle.net/fkqqv28e/

jQuery

Pour accéder à la maternelle nœud DOM à partir d'un jQuery collecte, à l'utilisation de la matrice de l'accès, c'est à dire:

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;

InformationsquelleAutor oodavid

3

Certaines personnes de venir ici simplement pour ajouter du contenu sans l'accent actuellement mis à sauter partout. La modification de Jeff B de la démo ci-dessus pour utiliser le clic cible de l'événement qui rend cette idiome plus portable:
```
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/ (variante de Jeff B de la démo ci-dessus mais avec le bouton [ajouter plus] à un point arbitraire dans la page).

InformationsquelleAutor ericP

Voici un truc tout simple qui a fonctionné pour moi:

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

InformationsquelleAutor Lacho Tomov

Vous pouvez également maintenir la position de défilement en fonction du décalage vers le bas de la page/élément.

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

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

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

InformationsquelleAutor Dany Gauthier

J'ai juste couru à travers une variation de la présente. je l'ai détaché un grand nombre d'éléments, traitées, puis attaché de nouveau. ce n'est pas effectuée de manière synchrone dans google Chrome, donc je ne pouvais pas mettre $el.scrollTop(oldval) de façon fiable. J'ai trouvé cette solution a fonctionné pour moi.

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

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

InformationsquelleAutor xeo

Vous devez vous connecter pour publier un commentaire.