Overflow-y et scrolltop=scrollheight
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:
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:
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 } ?> |
