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 } ?> |
