web-dev-qa-db-fra.com

Ajouter du contenu pour diviser et faire défiler / animer vers le bas

J'essaie de faire défiler un div vers le bas après avoir ajouté du nouveau contenu (à l'aide de l'ajout)

Voici la partie principale:

$('#textdiv').append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');

$('#textdiv').animate({scrollTop: $('#textdiv').height()}, 1000);

Voir/essayer dans le violon: http://jsfiddle.net/5ucD3/7/

Très buggy .. Il ne défile pas vers le bas (seulement peut-être au début quelques ajouts). Lorsque je fais défiler vers le bas et ajoute un nouveau contenu, il défile vers le haut. Parfois, cela n'anime pas du tout.

Comment le faire fonctionner toujours? Je pense que je dois en quelque sorte obtenir la hauteur correcte , mais je ne sais pas comment

jqueryscrolltop
27
mowgli

J'ai trouvé un moyen qui fonctionne:

$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

http://jsfiddle.net/5ucD3/13/

48
mowgli

Je suis encore en retard, mais voici mes deux cents.

Parfois, la mesure d'éléments dynamiques en utilisant une seule lecture peut être erronée car le contenu ajouté peut être long ou parce que la demande ($ .get, $ .post, $ .ajax, etc ...) est toujours en suspens . Si la chaîne ajoutée provient d'une demande, vous devez utiliser une méthode de rappel pour ajouter la réponse.

La meilleure chose que vous puissiez faire est de les enchaîner comme ceci, car javascript "devrait" résoudre les fonctions de manière synchrone:

$("#textdiv").append('The longest string ever parsed goes here.')
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

Mais vous avez raison, cette méthode a tendance à être boguée, en particulier lorsque vous traitez des divs qui mutent assez rapidement.

C'est pourquoi si vous voulez être plus sûr que le travail est fait, vous pouvez utiliser un intervalle:

var scroll_to_bottom = function(element){
    var tries = 0, old_height = new_height = element.height();
    var intervalId = setInterval(function() {
        if( old_height != new_height ){    
            // Env loaded
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else if(tries >= 30){
            // Give up and scroll anyway
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else{
            new_height = content.height();
            tries++;
        }
    }, 100);
}

$('#textdiv').append('The longest string ever parsed goes here.');
scroll_to_bottom($('#textdiv'));

Cette méthode ne peut pas battre un rappel ou une simple ligne de fonction, mais elle résout le problème si vous ne savez pas exactement quand l'ajout va se terminer.

5
pachanka

J'ai édité et testé votre code:

var div = $('#textdiv'),
    height = div.height();

$('#add').on('click', function(){
    div.append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');
    div.animate({scrollTop: height}, 500);
    height += div.height();
});

Essayez-le en direct dans jsFiddle

3
Nikita Shekhov