Scrollbar en bas Résolu

Question

Bonjour à tous,
je suis en train de réaliser un chat en javascript (jquery), tout est fonctionnel, mais quand la div qui contient les message est trop grande, je voudrais que la scrollbar soit automatiquement mise en bas.
Après de nombreuses recherches et essais, ce qui marche le mieux c'est ceci :
window.document.getElementById('chat').scrollTop = window.document.getElementById('chat').scrollHeight;

Malheureusement, quand la page est rafraîchie, la scrollbar est mise en bas pendant une fraction de seconde puis remise en haut.

Voilà le bout de code qui s'occupe du rafraîchissement de la page :

setInterval(function(){
        $.ajax({
            url: "maj.php",
            type: "post",
            data: { id: $('#id').text(), pseudo: pseudo },
            cache: false
        }).done(function( html ) {
            $("#content").html(html);
        });
    window.document.getElementById('chat').scrollTop = window.document.getElementById('chat').scrollHeight;
},5000);

Comme ceci, la scrollbar est 4.75 secondes en haut et 0.25 secondes en bas. Or j'aimerais qu'elle soit 100% du temps en bas.

La structure de ma page :

<body>
	<div id="content">
		<div id="id"></div>
		<div id="chat"></div>
		<div id="user"></div>
	</div>
</body>

Merci d'avance

XecK · Answer

J'ai eu la solution sur un autre forum : à cause de l'asynchronisme de l'AJAX, la fonction est exécutée avant la fonction de callback. Ainsi en déplaçant "window.document.getElementById('chat').scrollTop = window.document.getElementById('chat').scrollHeight;" dans cette fonction, ça marche.

Scrollbar en bas

1 réponse

Discussions similaires

Newsletters