Scrollbar lors d'un rafraichissement
Bonjour,
Je découvre le language javascript au lycée. Je dois faire un tchat avec les éléments que notre professeur nous a donné (fonction de réception et envoi des messages, réception et envoi des pseudos). Mon tchat est complet, les différentes fonctionnalités sont opérationnelles, tous les éléments (champs de textes, boutons, div, rafraichissement automatique de la liste des messages et des connectés) sont présents dans un tableau. J'ai défini une largeur et une hauteur maximale pour les cellules du tableau, il me faut donc une scroll bar pour voir tous les messages du tchat présents dans la div. Cette scroll bar est constamment descendue pour afficher le dernier message. La scroll bar est rafraichie en même temps que la div pour que lorsqu'un nouveau message apparait, la scroll bar descende et que le nouveau message soit visible par l'utilisateur du tchat.
Je suis conscient que les explications ci-dessus doivent vous paraitre évidentes, je vais donc passer à mon problème.
Imaginons que je veuille regarder un message déjà posté depuis un moment, je remonte la scroll bar. Sauf que la scroll bar se réactualise toutes les secondes donc descend au dernier message toutes les secondes. Je pense que vous imaginez mon problème à lire les anciens messages.
J'ai demandé à mon professeur s'il y avait moyen de bloquer le rafraichissement de la scroll bar par un onClick mais apparement ce n'est pas possible car la scroll bar n'est pas considérée comme un objet.
Je m'en remets donc à vous en espérant avoir des bout de codes pas trop compliqués (ou si possible expliqués pour ne pas copier bêtement du code) sachant que c'est ma première année d'informatique en première grâce à la réforme.:ccool:
Merci par avance pour votre aide.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var xhr4=(window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
xhr4.onreadystatechange=function()
{
if(xhr4.readyState == 4) document.getElementById("msg").innerHTML=xhr4.responseText;
}
function receptmsg()
{
xhr4.open("GET","site créé pour le tchat");
xhr4.send(null);
document.getElementById('msg').scrollTop = document.getElementById('msg').scrollHeight;
}
function update()
{
nametimer=setInterval("receptname();",1000);
msgtimer=setInterval("receptmsg();",1000);
}
// receptmsg et update sont exécutés lorsque l'utilisateur clique sur un bouton Charger qui envoi le pseudo saisi auparavant à une page php. |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<table border="1">
<tr>
<td>
<div id="listemsg">Liste des messages :</div>
<div id="msg"></div>
</td>
</tr>
<tr>
<td>
<input type="text" id="ecriremsg" placeholder="Entrer votre message">
<input type="button" value="Envoyer" id="envoimsg" onclick="envoimsg();">
</td>
</tr>
</table> |
Code:
1
2
|
#msg{width:475px; height:200px; overflow:auto;} |
