Probleme avec la mise en bas d'un SCROLL

Question

Bonjour, 

Je suis en train de faire un chat php/Ajax
lorsque l'on ajout un fil de discussion, je voudrais que le scroll se place au plus bas de manière à voir les dernières contributions.

voici un bout de mon code
    (...)
    xhr.send("Texte="+variable);
       alert('ok');
    var objDiv = document.getElementById("encours");
       objDiv.scrollTop = objDiv.scrollHeight;
    document.getElementById("Texte").focus();
    document.getElementById("Texte").value='';

je lance mon ajax
je met un dialogue ALERT(ok)
j'utilise scrollTop
je met le focus sur mon input pour continuer la conversation.

Tout fonctionne
mais lorsque j'enlève le ALERT(ok)
mon scrollTop n'est plus fonctionnel car il se met en position n-1

Pourquoi il y a une différence avec le ALERT()
comme si le système avait besoin d'un temps de pause pour finir l'ajax et correctement positionner le scroll.
j'ai essayé avec une pause d'une seconde (boucle) mais j'ai le même soucis.

Donc le ALERT() induit un comportement nécessaire et bien évidemment je ne veux pas de ALERT()

j'ai essayé objDiv.scrollTop = 10000; pour voir s'il fallait forcer une variable plus grande -> pas de différence.

Je sèche quand à ce comportement étrange.

Si quelqu'un à une piste, je suis preneur.

@karamel · Answer

bonjour

tu n'attend pas que la requette soit terminé il faut utiliser l'evenement onreadystatechange

xhr_object.onreadystatechange=function() {

if (xhr_object. readyState ==  4 && xhr.status == 200{

var objDiv = document.getElementById("encours");
       objDiv.scrollTop = objDiv.scrollHeight;
    document.getElementById("Texte").focus();
    document.getElementById("Texte").value='';
}
}

Probleme avec la mise en bas d'un SCROLL

1 réponse

Votre réponse

Discussions similaires