Simuler un scroll horizontal en javascript

Le principe

Pour obtenir cet effet, le principe retenu est de placer la zone devant défiler dans une DIV, elle même incluse dans une autre DIV servant de fenêtre en quelque sorte. Ces deux DIV vont être déclarées en positionnement absolu dans la feuille de styles CSS. Le défilement va s'obtenir en déplaçant le bord gauche de la DIV intérieure, c'est-à-dire en donnant une valeur négative à sa propriété style.left.

Chaque DIV peut être remplacé par n'importe quel élément possédant une propriété display de type block.

Le script

Le script permet de créer un objet exposant une seule méthode : scroll(). Cette méthode admet deux arguments. Le premier décrit le sens du déplacement et peut prendre les valeurs 'l' pour un déplacement vers la gauche, 'r' pour un déplacement vers la droite et 's' pour arrêter le déplacement. Le second argument, numérique, peut prendre n'importe quelle valeur entière positive ; il indique la vitesse du déplacement, une valeur de 1 donne un pas de scroll de 2 pixels, la valeur 2, 4 pixels, la valeur 3, 8 pixels...

Pour intancier un objet, il faut appeler son constructeur en lui fournissant en argument l'attribut id de l'élément que l'on désire faire défiler, en insérant dans la section body du document, après la déclaration de l'élément un script comme celui-ci :

<script type="text/javascript>
  var myDiv=new ScrollDiv("id_div");
</script>

Pour lancer le défilement, on peut se servir de l'événement onmouseover d'un élément quelconque, par exemple une image, et de l'événement onmouseout pour l'arrêter :

<img src="image_quelconque.gif" onmouseover="myDiv.scroll('l',2)" onmouseout="myDiv.scroll('s')">

Le script entier

Il est à insérer dans la section HEAD, ou dans un fichier externe s'il doit servir dans plusieurs pages.

<script type="text/javascript">
function ScrollDiv(id){
if(this==window)
  return new ScrollDiv(id); //ScrollDiv() called as a Function
  var elt=document.getElementById(id);
  var w=elt.offsetWidth;
  var s=elt.parentNode.offsetWidth;
  if(!w || !s || s>w){
    this.scroll=Function(""); return;}
  var divStyle=elt.style;
  var offset=0;
  var maxOffset=s-w;
  var timer=null;
  var self=this;
 
  this.scroll= function(dir,speed){
    var coef=1, S=speed;
    while(S--)coef*=2;
    if (timer)window.clearTimeout(timer);
    switch (dir){
      case 's': //stop
        break;
      case 'l': //left
        if(offset>maxOffset){
          offset-=coef;
          divStyle.left=Math.min(offset,0)+"px";
          timer=window.setTimeout(function(){self.scroll('l',speed)},25)}
        break;
      case 'r': //right
        if(0>offset){
          offset+=coef;
          divStyle.left=Math.max(offset,maxOffset)+"px";
          timer=window.setTimeout(function(){self.scroll('r',speed)},25)}
    }
  }
}
</script>

Un exemple

En cliquant sur le bouton ci-dessous, vous ouvrirez une popup (si le paramétrage de votre navigateur l'autorise bien sûr) qui vous permettra de tester le script. Ce dernier a été testé avec succès dans IE6, dans des navigateurs basés sur le moteur Gecko (Mozilla, FireBird, Netscape 7) et Opera 7.11. Il est absolument incompatible avec les navigateurs antérieurs (comme Netscape 4.7).

Étudiez-en le code source à loisir.

Au script donné, a été ajouté une gestion des événements clavier pour permettre le scroll par l'utilisation des touches de déplacement.