Discussion :

[Overstone]

Bonjour,

Je recherche une solution pour faire défiler un div horizontalement, avec 2 boutons par exemple gauche, droite et la possibilité de stopper la progression du défilement

Je ne sais pas si javascript peut offrir cette possibilité ???

[Sancho_54]

Utilise directement du scrolling sur ta div

[LexWizard]

Je viens de faire un bout de code, pour t'orienter vers la façon de procéder.
Il peut biensur être largement amelioré, mais dans l'état il fonctionne très bien

Code javascript :

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
<script type="text/javascript">
 
var PasRef = 3;
var Scroll = false;
 
function StartScroll(Sens, id)
{
    if(!Scroll)
    {
        Scroll = true;
        if(Sens > 0)
            Scrolling(PasRef, id);
        else
            Scrolling((PasRef * -1), id);
    }
}
 
function StopScroll(){
    Scroll = false;
}
 
function Scrolling(pas, id)
{
    if(Scroll && document.getElementById(id))
    {
        var nv = document.getElementById(id).scrollLeft + parseInt(pas);
        if(nv >=0)
        {
            setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
            document.getElementById(id).scrollLeft += parseInt(pas);
        }
        if(nv != document.getElementById(id).scrollLeft){StopScroll();}
    }
}
</script>

Code css :

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

1
2
3
4
5
6
 
#scroll_box {
    height: 100px;
    width: 200px;
    overflow: auto;
  }

Code html :

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

1
2
3
4
5
6
7
8
 
<a href="#" onclick="StartScroll(1,'scroll_box');">Scroll Left</a>
<a href="#" onclick="StartScroll(-1,'scroll_box');">Scroll Right</a>
<a href="#" onclick="StopScroll();">Stop Scroll</a>
<br>
<div id="scroll_box">
  <p>iciLeTexte_iciLeTexte_iciLeTexte_iciLeTexte_iciLeTexte_iciLeTexte</p>
</div>

Bonne continuation

[Overstone]

Salut,

Merci c'est justement ce que je cherchais !!
par contre quand tu parle d'amélioration c'est sur qu'elle plan : car niveau esthétique j'aime bien, aprés savoir si le code marche sur tout les navigateurs si il est bien addapté et codé ???