Boîte à défilement vertical

**Papapetch** · 09/08/2007, 16h28

Bonjour
Je cherche à faire défiler verticalement des éléments (images + textes) dans une fenêtre (clip). J'ai trouvé sur DevParadise des sources qui conviennent : http://www.devparadise.com/download/...cript/f630.php

Ce code fonctionne correctement sur IE6 mais ne marche pas sur Firefox2 (sauf si je supprime le doctype, ce qui n'est pas une solution).

Pouvez-vous m'indiquer une astuce pour débloquer ce problème ou me dire où trouver un code qui fonctionne dans les navigateurs "standard" ?

Info : le forum de DevParadise ne parait plus très vivant ..

Merci par avance

**Madfrix** · 09/08/2007, 18h08

Bonjour,

pourquoi ne pas faire plus simple et déplacer un div grâce à une fonction JS qui se réinitialise lorsque ce même div sort de ton cadre ?

Cela donnerait quelque chose de ce genre là :

Code :

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

1
2
 
document.getElementById("ton_div").style.top = X+"px";

avec X qui s'incremente dans une certaine mesure puis se réinitialise ensuite (boucle while).

Le tout serait exécuté toutes les Y millisecondes grâce à un setTimeout...

**Papapetch** · 10/08/2007, 12h27

Bonjour
Merci pour cette idée, ça parait en effet beaucoup plus simple.
Je fais des tests
Merci

**LexWizard** · 10/08/2007, 12h48

Salut,
Je ne comprend pas trop ce que tu cherches à faire, mais j'ai posté une source basic pour un defilement horizontal ici. Il te reste plus qu'à l'adapter pour un defillement vertical (donc "scrollLeft" devient "scrollTop"). Une fois arrivé au bout tu recommence en replacant à 0 le scrollTop.

Sinon il y a la balise <Marquee>
Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
 
<MARQUEE DIRECTION="up" bgcolor="blue" width="42%">
<center>
  le Texte defil de bas en haut<br>
  le Texte defil de bas en haut<br>
le Texte defil de bas en haut<br>
<img src="url_de_ton_image">
</center>
</MARQUEE>

**Papapetch** · 10/08/2007, 14h23

J'ai essayé le code que tu m'as indiqué sous IE6 et Firefox2. Il correspond assez bien à ce que je veux faire mais dans les deux cas, les navigateurs se bloquent après avoir testé le scroll

Peux-tu me dire comment remettre ScrollTop à 0 ?

J'avais vu la balise marquee mais elle ne me semble pas standard (voir : http://www.blooberry.com/indexdot/html/supportkey/m.htm)

**LexWizard** · 10/08/2007, 14h59

Tiens j'ai refais un script pour ton cas :

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
 
<html>
<head>
<style type="text/css">
#scroll_box {
    height: 100px;
    width: 200px;
    overflow: hidden;
  }
</style>
<script type="text/javascript">
var PasRef  = 3;
var Scroll  = false;
var lastPos = null;
 
function StartScroll(id)
{
    if(!Scroll)
    {
        Scroll = true;
        Scrolling(PasRef, id);
    }
}
 
function StopScroll(){
    Scroll = false;
}
 
function Scrolling(pas, id)
{
    if(Scroll && document.getElementById(id))
    {
        document.getElementById(id).scrollTop += parseInt(pas);
 
        if(lastPos != null)
        {
            if(lastPos == document.getElementById(id).scrollTop)
            {
                document.getElementById(id).scrollTop = 0;
            }
        }
        setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
        lastPos = document.getElementById(id).scrollTop;
    }
}
</script>
</head>
<body>
<a href="#" onclick="StartScroll('scroll_box');">Start Scroll</a>
<a href="#" onclick="StopScroll();">Stop Scroll</a>
<br>
<div id="scroll_box">
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
</div> 
</body>
</html>

Le problème, c'est que un fois arrivé en bas, il va remonté brusquement...

Edit: Tu peux mettre en haut et en bas du centeneur deux div dont leurs hauteur serait la hauteur du conteneur :

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="scroll_box" style="border:1px solid Black;">
   <div style="height:100px;"></div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <div style="height:100px;"></div>
</div>

Boîte à défilement vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager