Scroll automatique d'un div

**keisuke** · 19/08/2006, 17h24

Bonjour,
Voilà, je voudrais savoir, comment, faire pour, que la barre de défilement, d'un div, soit toujours en bas.( la position du scroll en bas du div).
Je me fais peut-être pas comprendre par, tous, alors, si c'est le cas, merci, de me demander, ce que vous ne comprenez pas.
D'avance Merci,

Cordialement,
Keisuke

**FremyCompany** · 19/08/2006, 17h55

Code :

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

Div.srollTo(0, Div.offsetHeigth * 1.5)

?

**keisuke** · 19/08/2006, 18h16

J'te remercie, d'avoir répondu, mais pourrais tu m'éxpliqué comment, tu l'applique ?

Merci quand meme

Cordialement,
Keisuke

**FremyCompany** · 19/08/2006, 18h47

comme tu veux, sur setInterval, ca ma parait simple... dans ton HTML tu mets cela :

Code :

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

1
2
3
4
5
<script type="text/javascript">
setInterval(function() {
    document.getElementById("ID").scrollTo[...]
}, 1000)
</script>

**keisuke** · 19/08/2006, 19h05

désolé, je suis débutant, en javascript, et j'ai toujours pas réussi:

Code :

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

1
2
3
4
5
 <script language="javascript" type="text/javascript">
setInterval(function() {
    document.getElementById("list_message").scrollTo[...]
}, 1000)
</script>

je voudrais que la fonction s'éxécute toute seul, toutes les 5 seconde(par exemple), et pour infos, l'id de mon div, c'est "list_message".

D'avance Merci

Cordialement,
Keisuke

**FremyCompany** · 19/08/2006, 20h36

le [...] était à remplacer par

Code :

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

(0, document.getElementById("ID").offsetHeight * 1.5)

**keisuke** · 19/08/2006, 22h20

Alors, j'ai testé en mettnt ça:

Code :

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

1
2
3
4
5
<script language="javascript" type="text/javascript">
setInterval(function() {
    document.getElementById("list_message").scrollTo(0, document.getElementById("list_message").offsetHeight * 1.5)
}, 1000)
</script>

Mais rien, la scroll bar, reste toujours en haut du div. Elle ne descend pas.
Merci quand meme
Si tu peux me faire un exemplesur une page html, que tu m'envoie, ça serais super sympa, mais bon, si quelqu'un a une autre solution, je suis preneur.

Cordialement,
Keisuke

**Auteur** · 21/08/2006, 15h37

bonjour,

Pour un petit défilement avec redémarrage (si tu veux que le défilement ne redémarre pas enlève la condtion else de la fonction défile).

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
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
#idDiv{
overflow: auto;
width: 200px;
height: 100px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var chrono;
var htDiv;
var offsetDiv;
var elDiv;
var pas=2;
function initVar()
{
  elDiv =document.getElementById("idDiv");
  htDiv = elDiv.scrollHeight;
  offsetDiv = elDiv.offsetHeight;
  demarre();
}
 
function demarre()
{
   elDiv.scrollTop = 0;
   chrono=setInterval("defile()",100);
}
function defile()
{
  if (elDiv.scrollTop+offsetDiv<htDiv)
     elDiv.scrollTop +=pas;
  else
  {
      clearInterval(chrono);  //redémarrage
      setTimeout("demarre()",5000); //5 secondes
  }
}
 
 
//-->
</script>
 
 
</head>
 
<body onload="initVar()" onbeforeunload="clearInterval(chrono)">
<div id="idDiv">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla<br><br>
</div>
 
</body>
 
</html>

Pour avoir le scroll en bas à l'ouverture de la 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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idDiv{
overflow: auto;
width: 200px;
height: 100px;
}
 
//-->
</style>
<script type="text/javascript">
<!--
function scrollEnBas()
{
 var elDiv =document.getElementById("idDiv");
 elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight;
}
 
//-->
</script>
 
</head>
 
<body onload="scrollEnBas()">
<div id="idDiv">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla<br><br>
</div>
 
</body>
 
</html>

**FremyCompany** · 21/08/2006, 15h41

Son but est seulement de faire un effet "Console" (le scroll bar est toujours en bas)

**Auteur** · 21/08/2006, 19h32

Envoyé par FremyCompany

Son but est seulement de faire un effet "Console" (le scroll bar est toujours en bas)

d'accord. Dans ce cas :

Code :

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

1
2
3
4
5
6
 
function scrollEnBas()
{
 var elDiv =document.getElementById("idDiv");
 elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight;
}

suffit ? Non ? Le scroll reste en bas, même lors d'un ajout (il suffit de rappeler la fonction).

Pour ce qui est du scrollTo() ou du scrollBy(), curieusement j'ai une erreur lors de l'appel. J'ai fait quelques recherches : j'ai l'impression que ces fonctions ne s'appliquent qu'à objet window.

**FremyCompany** · 21/08/2006, 20h00

Envoyé par Auteur

Pour ce qui est du scrollTo() ou du scrollBy(), curieusement j'ai une erreur lors de l'appel. J'ai fait quelques recherches : j'ai l'impression que ces fonctions ne s'appliquent qu'à objet window.

Oui, tu as raison

Voila pourquoi mon code ne marchait pas

Dans ce cas, il a une méthode très simple :
(le *2 est juste une mesure preventive)

Code :

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

obj.scrollTop=(obj.offsetHeigth*2)

**Auteur** · 21/08/2006, 23h22

Envoyé par FremyCompany

Code :

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

obj.scrollTop=(obj.offsetHeigth*2)

euh sans vouloir être désagréable

, je crois que tu n'as pas lu mon bout de code :

Code :

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

1
2
3
 
 var elDiv =document.getElementById("idDiv");
 elDiv.scrollTop = elDiv.scrollHeight-elDiv.offsetHeight;

scrollTop : position du curseur ;
+ offsetHeight : hauteur affichée de l'élement ;
= scrollHeight : hauteur totale de l'élement.

**FremyCompany** · 22/08/2006, 10h35

Si si, j'avais lu... mais je dois dire que j'avais pas percu le principe

**keisuke** · 22/08/2006, 11h50

Franchement, merci !!!
Je vous remerci, mais j'aurais d'autre question.
Je ne sais pas, si je commence un nouveau topic, ou pas ?
Mes questions, son toujours a propos d'un div:
- comment rafraichir un div automatiquement
- comment inséré du text dans un div, soit par un input, soit par une requête sql ?

**FremyCompany** · 22/08/2006, 11h54

Si tu as besoin du serveur pour mettre ta DIV à jour, tu dois passer par AJAX

Pour ce qui est de rajouter du texte à une div :

Code :

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

div.innerHTML+="Du <b>html</b>."

ou (mieux)

Code :

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

div.appendChild(document.createTextNode("Du Texte (éèêë)"))

**keisuke** · 22/08/2006, 12h03

merci de ta réponse très rapide.
Est-ce que tu sais comment, faire en AJAX pour rafraichir ?
Merci encore

**FremyCompany** · 22/08/2006, 12h06

Oui, mais je te conseille de lire un tutoriel

**keisuke** · 22/08/2006, 12h09

merci, encore...
Et escuse moi de t'avoir embêté avec mes questions....

Cordialement,
Keisuke

Scroll automatique d'un div

JavaScript

Discussions similaires

Partager

Partager