Overflow-y et scrolltop=scrollheight

**xxkirastarothxx** · 05/12/2008, 16h20

Bonjour, ou rebonjour

Y'a un truc qui me prends la tête depuis pas mal de temps:
Dans une de mes pages j'ai un div en overflow-y:auto;
le truc c'est que je voudrais qu'au chargement de la page l'ascenseur se trouve en bas du div.
j'ai essayé beaucoup de façon, mais ça ne veux pas marcher:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function load()
{
	var elt = document.getElementById("chat_message");
	elt.scrollTop=elt.scrollHeight;
}
window.onload=load()
-------------------------------------------------------------------
window.onload=function(){document.getElementById("chat_message").scrollTop=document.getElementById("chat_message").scrollHeight;}
-------------------------------------------------------------------
window.onload= document.getElementById("chat_message").scrollTop=300;

et autre...
Y'a bien une façon qui fonctionne, c'est de metre un setTimeout(refresh, 2000); mais y'a deux problème avec cette solution:
1 => je voudrais que l'ascenceur ne soit en bas qu'au chargement de la page, pas qu'il redescende toute les Xsec
2 => je suis obliger d'attendre les premières Xsec avant que le scroll ne se decide à descendre.

Merci a tous d'avance

Précisions et code complémentaire:
Ma page est bien complexe, car le div que j'essaye de descendre contient du php inclue par de l'ajax afin de pouvoir actualiser la page sans rafraichir,
Comme un exemple vaut mieux qu'un long discours, voici ma page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php
        if ($_GET['option'] == 'channel')
        {
                require('channel.php');
        }
        else
        {
        if ($_SESSION[CONFIGNAME]['channel'] == NULL AND $_GET['channel'] == NULL)
        {
                $_SESSION[CONFIGNAME]['channel'] = 1;
        }
        if ($_GET['channel'] != NULL)
        {
                $_SESSION[CONFIGNAME]['channel'] = $_GET['channel'];
        }
        $url = "composants/chat/chat.php?channel=".$_SESSION[CONFIGNAME]['channel']."&pseudo=".$_SESSION[CONFIGNAME]['pseudo']."&time=";
?>
		<script type="text/javascript">
			function chat()
			{
			var xhr_object = null; 
			if(window.XMLHttpRequest) // Firefox 
			   xhr_object = new XMLHttpRequest(); 
			else if(window.ActiveXObject) // Internet Explorer 
			   xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   return; 
			} 
			var time_stamp = new Date();
			xhr_object.open("GET", "<?php echo $url;?>"+time_stamp, true); 
			xhr_object.onreadystatechange = function() { 
			if(xhr_object.readyState == 4) document.getElementById( 'message' ).innerHTML = xhr_object.responseText; 
			} 	 
			xhr_object.send(null);
			}
			function load()
			{
				var elt = document.getElementById("chat_message");
				elt.scrollTop=elt.scrollHeight;
			}
			function refresh()
			{
				chat();
				setTimeout(refresh, 2000);
			}
			window.onload=load();
		</script>
		<?php echo "<link href='composants/chat/chat.css' rel='stylesheet' type='text/css' />"; ?>
			<div id='chat_top_menu'>
				<a href='index.php?com=chat&channel=1'>General</a>
				<a href='index.php?com=chat&channel=private'><?php echo PRIVAT; ?></a>
				<a href='index.php?com=chat&channel=3'>Spam</a>
			</div>
			<div id='chat_corps'>
				<div id='chat_message' style='overflow-y: auto;'>
					<div id="message"></div>
				</div>
	            <div id='chat_module'> 
					<?php require "modules.php"; ?>
				</div>
				<div id='chat_footer'> 
					<?php require "form.php"; ?>
				</div>
		        <ul>
					<li><?php echo CHAT_PUBLIC_MESSAGE;?></li>
					<li style='color:#666666'><?php echo CHAT_PUBLIC_MESSAGE_AUTH;?></li>
					<li style='color:#0000FF'><?php echo CHAT_PRIVATE_MESSAGE_AUTH;?></li>
					<li style='color:#FF0000'><?php echo CHAT_PRIVATE_MESSAGE_DEST;?></li>
				</ul>
				</div>
			</div>
        <script type="text/javascript">
            refresh();//On appelle la fonction refresh() pour lancer le script
        </script>
<?php } ?>

**javatwister** · 05/12/2008, 19h45

essaie de lancer load() à la fin de chat() plutôt que sur onload;

**xxkirastarothxx** · 06/12/2008, 00h04

Merci, mais nan ça marche pas, puisque chat() est exécuté dans refresh()
Mais bon s'pas grave je crois que je vais laisser comme ça, y'a d'autres problèmes qui mes sont apparus ^^
genre si un nouveau message arrive dans ma page chat.php, le div de message s'actualisera mais le scroll ne descendra pas si je trouve le moyen de n'exécuter load() qu'une seule fois et non a tout les refresh.
Je voulais que ça evite de redescendre toutes les 2sec mais j'aurais également aimé que le scroll descende tout de même au nouveaux messages.
Donc après plus mure réflexion, vu mon niveau de connaissance actuel de l'ajax, je pense que le script est au meilleur rapport "qualité/prise de tête" ^^

Merci quand même

**javatwister** · 06/12/2008, 09h14

l'astuce pour les "chat html" est de n'actualiser l'interface que si des nouveaux messages sont vraiment arrivés; test côté serveur du nombre de messages et comparaison avec l'ancien;
un autre truc consiste à fixer un maximum de messages visibles, qui vaz te permettre d'avoir une fenêtre sans scroll; les précédents messages sont par exemple consultables via un clic "archives", dans la même fenêtre;

**le_chomeur** · 06/12/2008, 11h09

sinon .... une méthode un peu barbare :

tu appels une méthode avec un set interval ultra court en faisant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('contenu_message').scrollTop +=1500000;

contenu_message est ta div qui scroll

**xxkirastarothxx** · 08/12/2008, 08h53

Envoyé par javatwister

l'astuce pour les "chat html" est de n'actualiser l'interface que si des nouveaux messages sont vraiment arrivés; test côté serveur du nombre de messages et comparaison avec l'ancien;
un autre truc consiste à fixer un maximum de messages visibles, qui vaz te permettre d'avoir une fenêtre sans scroll; les précédents messages sont par exemple consultables via un clic "archives", dans la même fenêtre;

Ohh pas bête ^^
Surtout que dans mon chat.php je test déjà s'il y a des nouveaux messages pour jouer un petit son, faudrait que je place la commande js ici.
Le soucis c'est que mon javascript est dans la page mère, et ce n'est pas considéré comme une frame donc j'arrive pas a faire passer le javascript.
J'ai essayé avec un parent.load() mais ça marche pas.
Je vais aussi essayé de placer le div scollé dans chat.php au lieu de la page mère, ça peut marcher.
( l'archive je l'ai déjà, j'ai aussi une plusieurs channel, et également une partie privée ^^ Mais comme j'affiche quand même 25messages je préférais l'idée du scroll)
Je test ça (si ça marche j'éditerais ^^)

**xxkirastarothxx** · 08/12/2008, 09h30

Ah bah non ça marche pas si je le met dans chat.php => a chaque refresh le scroll remonte automatiquement.
Il me faudrait un équivalent de parent.fonction() mais qui passe dans ma fonction ajax.

document.getElementById('contenu_message').scrollTop +=1500000;

Bah j'avais quelques chose d'equivalent (present dans mon code):

window.onload= document.getElementById("chat_message").scrollTop=300

j'avais également essayé sans window.onload, et avec et sans le += mais ça ne fonctionne pas :S

**xxkirastarothxx** · 10/12/2008, 10h55

Rohhh mais c'est space tout ça :S
Que je le mette dans index.php en fin de page, ou dans chat.php n'importe ou, si je met un onclick='load()' ça fonctionne, mais si je met avec un onload, il se passe rien

s'pas normal quand même si ? oO

Je vais allé voir comment est fais le script (du lien) que tu as posté, ça a l'ai interessant, mais je pense que le problème serra le même :S
J'vais voir ça

Merci

Edit: Arg, j'avais pas fait attention, mais si dans mon chat.php je met un petit:
<script type='text/javascript'>alert('arg');</script>
juste après l'ouverture de session, ça ne marche même pas (alors qu'un onclick='alert("arg")' fonctionne toujours aussi correcement... :S
J'y comprends rien

Overflow-y et scrolltop=scrollheight

JavaScript

Vue hybride

Discussions similaires

Partager

Partager