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 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')">
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>
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.