Recréer une scrollbar en javascript

Niveau

En rapport...

Recréer une scrollbar en javascript

Cette méthode vous permettra de créer vous même votre propre scrollbar. L'avantage de cette méthode est que vous pourrez personnaliser complètement les boutons de votre scrollbar.

Déplacement géré par javascript

javascript

<script language="javascript" type="text/javascript">
var Timer;
var Pas = 3;
function moveLayer(Sens) {
	Objet=document.getElementById("contenu");
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>

Pour faire varier la vitesse de défilement il suffit de modifier la valeur de la variable “Pas”

Positionnement des bloque grâce au css

Le principe est simple il suffit de placer 2 div le premier est celui qui délimitera la zone d'affichage. Le second est le contenu à faire défiler. Nous rajoutons un troisième div qui contiendra les bouton de défilement, vous pouvez le positioner ou vous voulez cela n'a aucune importance.

html4strict

<div id="support" style="position:relative; width:150px; height:280px; overflow:hidden; border:1px solid #000;">	
	<div id="contenu" style="position:absolute; top:0;">
		DEBUT<br />ligne1<br />ligne2<br />ligne3<br />ligne4<br />ligne5<br />ligne6<br />
		ligne7<br />ligne8<br />ligne9<br />ligne10<br />ligne11<br />ligne12<br />ligne13<br />
		ligne14<br />ligne15<br />ligne16<br />ligne17<br />ligne18<br />ligne19<br />FIN<br />
	</div>
	<div style="background-color:#0F0; width:22px; height:280px; position:absolute; right:0; border-left:1px solid #000;">
		<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" />		
	</div>
</div>

vous pouvez placer les style dans une feuille de style à part celui définissant la position top du div “contenu” afin que javascript puisse avoir accès à cette valeur.

Démo

cliquez pour voir la demo

07/12/2006 14:37 -

ManiT4c
Vous désirez créer votre site web ? Je suiswebmaster en normandie sinon vous pouvez consulter mon profil yoolink pour suivre mon actu etmon twitter.

Discussion

Nebukam, 19/12/2006 21:46:

Attention cependant, ce script ne fonctionne que sous Internet Explorer, et pas sous firefox !

iDo, 30/12/2006 17:55:

Salut, je pense que tu te trompe car la démo situé sur cette page fonctionne tres bien sur firefox (le 2 en tout cas!)

Andry RAMANAMBAHOAKA, 22/01/2007 13:51:

et de gauche à droite, c’est possible?

maniT4c, 23/01/2007 17:51:

Oui il suffit de modifier dans le javascript les offsetHeigh par offsetWidth et les Top par des Left.

guigui, 21/02/2007 17:08:

Hello, Tout dabord merci pour ce petit script bien pratique et qui plus est bien fonctionelle. Sinon, parceque tout n’est pas rose :), je viens d’essayer le fameux horizontale et hélas ça ne fonctionne il me semble avoir fait tout ce que tu disais mais hélas ça ne fonctionne pas ... est ce que le fait d’avoir deux scroll un verticale et un horizontal peux poser un pbm ?

guigui, 22/02/2007 08:42:

Dsl pour moi ... j’avais oublié de rajouter dans le css le “left:0;” ... Encore Merci pour ton script maniT4c et dsl pour le dérangement.

SopRanO, 23/02/2007 04:07:

Est-il possible d’integrer ce systeme dans une div ? Car j’ai quelques soucis... :/

Merci

SopRanO, 23/02/2007 04:33:

Désoler pour le double post :S Je vous ai copié mon code sur PasteBin > n°524 Merci

guigui, 23/02/2007 09:19:

Hello, Tu pourrais rajouter les styles CSS pour qu’on puisse voir ?

SopRanO, 23/02/2007 11:54:

Le voila > id n°525. Merci

iDo, 23/02/2007 17:37:

Salut,
je t’ai coller un code qui fonctionne :
numéro 526 sur le pastebin
En fait tu avais plusieurs problèmes : * Tu as changer les id des bloc (j’ai donc du modifier la partie javascript * Tu n’avais pas respecter les endroit où placer les attribut style=”” * Tu avais oublier de fermer un div Avec la version sur le pasteBin tu devrais t’en sortir ;) ++

SopRanO, 24/02/2007 11:39:

Merci pour votre aide , je vais essayer de retenter et voir si jmen sors.

gros-R, 02/03/2007 16:57:

Bonjour, ce script semble ne pas fonctionner sous ie7 ! (il fonctionne bien sous ie6, firefox, opéra, ...). Que doit-on faire pour arranger ça ? Merci d’avance.

maniT4c, 07/03/2007 08:50:

J’ai vérifié et chez moi il fonctionne sur I6,IE7,FF2.0 et FF1.5 . Le problème doit surement venir d’ailleurs.

Abdedine, 11/05/2007 15:21:

Bonjour,

Petite question svp...

Ou trouver les méthode clearTimeout et setTimeOut

Merci d’avane

iDo, 11/05/2007 18:02:

salut,
ce sont des fonctions native à javascript

nanoo, 25/07/2007 12:56:

Bonjour,

J'ai un petit soucis j'en ai inserer plusieurs sur la meme page, et sous IE il marche bien tous mais sous firefox et safari aucun ne marche. En fait je l'ai est inserer dans un site Ecommerce dans un page index.php , sous Firefox et safari les 2 premier marche bien mais les deux suivant non?

Sait tu pourquoi ? Merci d'avance

iDo, 25/07/2007 13:59:

Salut !
Tel quelle est présenté ici la fonction ne peu être utilisable que pour un seul ascenseur par page.
En effet, elle utilise un id pour repérer la zone a scroller.
Il faudrais légèrement la modifier pour que ça marche.
essaye comme ça :

javascript

function moveLayer(Sens,obj) {
	Objet=document.getElementById(obj);
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
	}
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) {
		clearTimeout(Timer);
	}
    else {
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
	}
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}

et pour les boutons scroll :

html4strict

<img onmouseover="moveLayer(1,'contenu');" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
<img onmouseover="moveLayer(-1,'contenu');" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" /

 Le 2eme paramètres de moveLayer est l'id de l'objet qui doit scroller. 

 ex : <div id=“contenu” 

 Il faut penser à changer cet id à chaque fois (dans l'attribut du div et dans le paramètre de la fonction sur chaque onmouseover 



PS : Fait nous un retour si ça fonctionne :)

Tolopi, 17/09/2007 18:40:

Salut

Je n'arrive pas à faire fonctionner cette version du script pour plusieurs ascenseurs par page. Quelqu'un l'a-t-il testée ?

Moi, ça défile de 1px et puis plus rien…

merci d'avance

philippe-l, 19/09/2008 11:43:

Moi pareil! 1px et plus rien. Je ne comprends pas, si qq1 a une idee, je suis preneur! Merci

thybou, 30/07/2007 01:35:

hello, le défilement ne marche pas avec la souris sur les boutons et je pense que ça vient tout simplement de mes div. je peux pas changer mes <div class=”…”> en <div id=”…”>, mais est ce que je peux changer le script? Comment? merci bien!

iDo, 09/08/2007 08:30:

salut ! Pourquoi ne pas faire des <div class=”…” id=”…”> ?

elise, 04/09/2007 16:01:

Bonjour, je joue a l'apprenti sorcier du webmastering depuis un mois et j'aurais besoin de quelques conseils… ça ne scroll pas chez moi en fait… La jolie démo de plus haut sur la page non plus soit dit en passant.. Qu'est-ce que je fais de travers?

elise, 04/09/2007 18:20:

Bon, en fait c'est juste chez moi que ça ne scrolle pas… vou pouvez m'aider s'il vous plait? :D

		var Timer;
		var Pas = 3;
		function moveLayer(Sens) {
		Objet=document.getElementById("contenu");
  		if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
		clearTimeout(Timer);
		}
		else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.				             getElementById("support").offsetHeight)) 
		{
		clearTimeout(Timer);
		}
 			else {
    	    Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
		}
		Timer = setTimeout("moveLayer(" + Sens + ");", 30);
		}
		</script>
       
	   
	   
	   
	    <div id="support" style="position:relative; width:350px; height:180px; left:70px;top:140px; 							            overflow:hidden; border:0px solid #000;">
		
		
		
            	<div id="contenu">
              
			
			<h1 class="textarticles">La rentr&eacute;e d'Eclair Prod: </h1>
              <p>&nbsp;</p>
              <p><span class="h2">Jambor&eacute;e est de retour! </span> </p>
              <p class="textarticles">Nouvelle &eacute;quipe, nouvelle orchestration, bient&ocirc;		t le retour de Jambor&eacute;e sur la sc&egrave;ne belge et internationale!</p>
              <p class="textarticles">&nbsp;</p>
              <p class="h2">En Septembre :</p>
              <p class="textarticles">Tournage  du court &quot;Sursis&quot;. Un jeune homme commet accidentellement un meurtre et  prend la fuite. Le tournage se fera &agrave; Bruxelles et en Ardennes. Eclair  se chargera notamment de la post-production. </p>
              <h3>&nbsp;</h3>
              <h3 class="h2">La l&eacute;gende de Samson</h3>
              <p class="textarticles">C'est  l'histoire del'homme le plus fort du monde. Il peut d&eacute;chirer un botin  en huit morceaux et plier un clou avec ses dents! A douze ans, le roi  des gitans l'a baptis&eacute; Samson et lui a pr&eacute;dit une vie glorieuse.  Cependant, Samson ne devait jamais conna&icirc;tre l'amour des femmes. </p>
              <p class="textarticles">Le documentaire sur la l&eacute;gende de Samson est actuellement en post-production.</p>
              <p class="h2">&nbsp;</p>
              <p class="textarticles"><img src="images/samsonetdalila.jpg" alt="samson" 
			width=  "150" height="208"  /></p>
              <p class="textarticles">&nbsp;</p>
            	
			
		</div> <!--contenu end-->
		  
		  
		  
		  
		 
            <!--la barre de defilement-->
            <div class="barre"> 
		   
		   <img onmouseover="moveLayer(1,'contenu');" onmouseout="clearTimeout(Timer);" src= 		              "slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="cursorup" />
		  
		  <img onmouseover="moveLayer(-1,'contenu');" onmouseout="clearTimeout(Timer);" src=              "slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="cursordown" />		              </div>
  		  </div><!--barre end-->

     </div><!--support end-->

Voilà, et puis il y a la feuille de style pour la javascript:

/* css pour déplacement de “calques en java pour la scrollbar */

#contenu

{position:absolute; top:0; width:350px; left:20px; height:180px;}

#support

{position:relative; width:350px; height:1680px; left:0px;top:140px; overflow:hidden; border:0px solid #000;}

.barre

{background-color:#FFFFFF; width:20px; height:180px; position:absolute; right:auto; left:0px; top:0px; border-left:0px solid #000;

}

Voilà…

D'avance un grand merci

iDo, 05/09/2007 08:56:

Salut ! Meme l'exemple sur la page ne scrolle pas ?
Peut-tu nous en dire plus sur ta configuration ? PC ou MAC ? Opera, safarie, firefox, ie ?

elise, 06/09/2007 15:09:

Salut,

l'exemple scroll très bien finallement :). Je ne comprends pas très bien… Je travaille sous windows xp et je teste mes pages sous firefox et IE. Voilà… Je m'y remet.. si j'ai du nouveau je vous le fait savoir!

Emperor66, 12/09/2007 01:02:

Hello,

j'ai une erreur javascript “Argument non valide” à la ligne 12 du script (sur le premier caractère de la ligne): Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + “px”;

Une petite idée?

Merci d'avance!

Conf: XP Pro + IE6/Maxthon

iDo, 12/09/2007 08:50:

salut !
Si tu utilise laversion dans le tuto,
Je pense que l'objet avec l'id “contenu” n'existe pas.
Si tu utilise le bout de code dans les commentaire, je dirais que l'id que tu passe à la fonction est invalide.

Emperor666, 14/09/2007 23:35:

Salut,

merci pour ta réponse…

Non en fait c'est juste que je n'avais pas positionné de paramètre “top” pour ce div….

Maintenant, j'ai un autre souci: ca fonctionne très bien sous IE6 ou Maxthon, mais rien ne se passe sous Firefox 2.0.0.6…

Schtrumpfette, 20/09/2007 05:32:

Salut à tous

Franchement MILLE MERCIS pour ce script, c'est vraiment le plus simple et efficace que j'ai pu trouver et pourtant j'en ai parcouru des pages sur Google… :) Mais voilà j'aimerais mettre une barre de défilement entre les deux flèches… J'en ai déjà vu mais j'ai jamais réussi à piger comment tout paramétrer pour j'ai ce que je veux au final et je commence à désespérer ! Y'a une solution ?

Mille mercis :) Schtrumpfette

luciole66, 01/12/2007 11:12:

As tu réussi à mettre un cursor entre les deux flèches ?? Pourrais tu m'expliquer ? Merci

maniT4c, 20/09/2007 09:42:

Je n'ai pas eu besoin de rajouter de barre de défilement mais je pense que tu peux en simuler une en rajoutant un div (représentait le curseur de la scrollbar) qui se positionnerai entre les deux flèches (donc en absolute; et right:0), et qui se déplacerai en même temps que le div “contenu”. Le problème c'est que le comportement normal d'une scrollbar n'est pas vraiment celui ci. Une scrollbar contien un curseur dont la taille s'adapte par rapport à la fenetre visible (“support”) et la fenetre qui se déplace (“contenu”) de plus le déplacement du curseur est lui aussi lié à ce rapport entre ces deux fenêtres.

jc, 02/10/2007 14:34:

Simple, efficace ! super merci !

rafax, 18/10/2007 15:56:

Slt,

Ce code est super, genial…

Merci

didi, 17/01/2008 11:55:

bonjour, j'aurais voulu à quoi ça servait :” ← ” parce que je ne vois pas du tout ce que cela représente !! merci !! didi

playordi, 23/01/2008 10:29:

bonjour,

le code marche nikel pour moi a ceci pres ; j'ai mis un fomulaire dans la div et lorsque j'appuis sur shift pour passer de champ en champ , un bug d'affichage se creer , les fleches se deplace vers le haut

merci

maniT4c, 24/01/2008 10:53:

Peux tu nous donner une adresse web où l'on pourrait voir ce phénomène ?

ivanova, 11/02/2008 21:05:

Au secours..

Cela fait 3 heures que je cherche mon erreur dans le placement du java .. si quelqu'un peut m'aider… Je dois encore placer correctement les petite icone mais de toute façon l'anim ne marche pas.. voici mon code..

html4strict

<script language="javascript" type="text/javascript">
 
var Timer;
 
var Pas = 3;
 
function moveLayer(Sens) {
 
	Objet=document.getElementById("texte");
 
    if(parseInt(Objet.style.top) + (Pas*Sens)>0)  {
 
		clearTimeout(Timer);
 
	}
 
	else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("main").offsetHeight)) {
 
		clearTimeout(Timer);
 
	}
 
    else {
 
        Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
 
	}
 
	Timer = setTimeout("moveLayer(" + Sens + ");", 30);
 
</script>
 
<body>   
 
<div id="container">
 
  <div id="header">
 
    <h1>&nbsp;</h1>
 
    <!-- fin de #header -->
 
  </div>
 
 
 
</div>
 
  <div id="main">
 
 
 
  <div id="texte"> <span class="titre">Interview</span> 
 
    <p>
 
Dans « POUR L’AMOUR DE L’AMOUR », je fête la renaissance des nouvelles énergies. On n’a jamais trop vécu, on a encore tout à vivre !<br />
 
« Changer tout », c’est le bonheur qui se savoure et la fierté de se dire « qu’est c’que t’as bien fait » !<br />
 
Mon propre texte « En attendant » exalte le retour à tous les possibles : aimer, écrire, chanter !<br />
 
Je dédie « Votre fille a vingt ans » à la mienne de 15 ans, Manon, ma plus belle réussite, mon avenir, celle qui me fait croire que j’ai encore 2O ans !<br />
 
Et puis, l’épitaphe rêvée… que j’aimerais tant mériter, être « JUSTE QUELQU’UN DE BIEN »….<br /><br />
 
 
 
Q : Julie, est-ce une nouvelle vie qui commence ?<br />
 
JP : Non ! C’est vivre autrement, sans rien renier de tout le chemin parcouru. Aujourd’hui, j’aime à me livrer sans fard, même si j’adore le glamour !<br /><br />
 
Propos recueillis par Marie Catherine DJEMALLI</p>
 
</div>
 
<div id="scroll">                
 
         <img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer); " src="site/Julie-Pietri.com/image/slideup.png" style="cursor:pointer;" alt=""/>
 
		<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer); " src="site/Julie-Pietri.com/image/slidedown.png" style="cursor:pointer;" alt="" />
 
         </div>

maniT4c, 12/02/2008 16:12:

Tu doit avoir une erreur de syntaxe car ta fonction n'est pas refermer il manque une accolade à la fin.

thybou, 25/02/2008 13:01:

bon, décidément rien ne se passe de mon coté, peut-être une intégration du code tirée par les cheveux? si quelqu'un a une petite idée? http://sax.osmose.free.fr/dc/index.php?post/2007/07/10/saisons-passees , merci!

maniT4c, 25/02/2008 14:32:

Bonjour thybou j'ai regarder ta page et d'après ce que j'ai vu tu n'as pas d'erreur javascript c'est déja un bon point. Essai d'ajouté des alert pour vérifier dans quel condition tu te retrouve. Ca te permettra de mieux cibler le problème. Ensuite ton div content ne contient pas que le div “post-content” ça peut poser problème.. Sinon essai de créer une page de test ou tu ne mettra que la scroll bar (et le texte a faire défiler) voir si déja tu arrive à la faire fonctionner et à partir de là tu pourra réassayer de l'intégrer à ton site.

thybou, 03/03/2008 21:32:

Merci d'avoir regarder maniT4c! J'ai fait quelques tests, mais pas moyen… je vais trouver une autre solution… dommage, ton script était simple et performant, je vais regarder du côté jquery à défaut… sniff

Isa, 26/02/2008 19:32:

bonjour

Merci pour ce script qui est de loin le plus efficace et le plus simple des nombreux vus sur la toile. Ca marche très bien pour moi dès qu'il s'agit de texte ou d'image dans ma div contenu mais j'ai essayé avec un objet shockwave (un player de flv en swf) et dans ce cas j'ai un souci dans Firefox uniquemment. Mon objet passe au dessus de mon footer.

http://ilassalvy.free.fr/adigard/Bleu1-2-scroll-js-ff.html

D'avance merci de votre aide.

maniT4c, 27/02/2008 09:59:

Bonjous Isa, Essai de mettre ton flash en mode transparent c'est souvent la seule méthode pour qu'un objet flash passe sous un autre élément. Regarde ici –> placer un div par dessus un swf

Attention pense à vérifier je ne suis pas sur que cela fonctionne sous linux. tiens nous au courant si cela fonctionne c'est toujours bon à prendre :).

ivanova, 07/03/2008 11:48:

Bonjour,

Je reviens vers vous.. le script marche très bien la dernière fois que j'ai envoyé un post je m'étais trompé dans le code. Maintenant j'ai une petite question est ce que l'on peut mettre deux scroll bar dans la même page.. qu'ils soient independant l'un de l'autre.. j'ai essayé mais cela me bloque une des deux.. Avez vous une idée sur la technique à suivre.

Merci

nathalie, 07/03/2008 16:31:

vraiment sympa ce script ! tout ce qu'il me fallait !!! simple, clair et net !

par contre, un vrai curseur central, pensez-vous en coder un ? ;)

mentos, 13/03/2008 15:52:

ce code est génial., mais je voudrais y intégrer un curseur. Quelqu'un aurait un exemple de code pour intégrer un curseur sur la barre de scroll, qui se déplacerait en même temps que le texte. ?? Merci

maniT4c, 14/03/2008 09:47:

Malheureusement je n'ai pas prévu de créer un curseur. De plus ajouter un curseur risque de rendre les choses beaucoup plus compliquées le comportement d'un curseur est particulier et il s'adapte à la quantité de texte à faire scroller. Il faut donc prévoir que la taille du curseur diminue plus il y à de texte. La vitesse de défilement doit elle aussi s'adapter à la taille du texte à faire scroller. Bref pas mal de calcul à faire. Je n'ai pour l'instant pas besoin d'afficher de curseur et pas le temps de m'y coller. Mais n'hésitez pas à proposer un code si vous avez une solution pour faire cela :).

pat, 21/03/2008 11:39:

Bonjour ^^ je viens de tomber sur petit script très efficace et pratique, mais j'ai un problème avec : je suis passé en horizontal, mais ça ne scroll rien :p quand je me mets sur mes flèches rien ne se passe… aurais-je oublié de modifier quelque chose ? dans le javascript, j'ai bien remplacé les top par des left et les offsetHeight par des offsetWidth, et dans mon html j'ai replacé mes boutons avec left et right tout ça tout ça. Quoi d'autre ??

Manolo, 26/03/2008 02:17:

Salut ManiT4c,

Merci beaucoup pour ce très bon script à la fois simple et pratique, cependant j'aimerai aussi pouvoir en faire fonctionne deux sur la meme page. J'ai essayé les modifications écrites plus haut mais cela ne fonctionne pas, j'ai pas vraiment compris cette modif avec l'ajout de “obj” dans le script??

Que faut il faire pour activer les boutons de la 2eme scrollbar sans perturber la 1ere ?

Cdt.

Manolo

maniT4c, 26/03/2008 22:53:

En fait dans le script de base la fonction javascript utilise Objet=document.getElementById(“contenu”); pour cibler le div à déplacer. Si tu veux déplacer plusieurs div différent il faut rendre cette parti dynamique c'est pourquoi tu doit modifier cette ligne en mettant document.getElementById(idDeTonElement); et que tu appel la fonction au survol des boutons avec onmouseover=“moveLayer(1,'contenu');” Jen 'ai pas vérifier le script proposé par Ido mais il devrait fonctionner je pense. J'essairai de tester dés que possible et proposerai un script améliorer qui fonctionnera pour plusieurs div sur une même page.

chok, 06/12/2009 19:20:

Salut

Très bon script, tout est nickel exepté ce problème d'ID qui fait qu'on ne peux pas en même plusieurs sur la même page. :(

J'ai essayer ta solution et ça ne marche pas.

Est ce que je pourrais avoir un code complet, avec l'exemple de plusieurs Scroll dans la même page ?

Merci d'avance

Fred, 06/04/2008 16:48:

Excellent script qui permet d'afficher des scrollbars personnalisées sur tous les navigateurs ! Merci beaucoup !

maniT4c, 08/04/2008 11:18:

Si vous appréciez ce script vous pouvez le “digger” en cliquant sur le bouton “digg” en haut ça nous fera de la promo :). Merci d'avance à ceux qui le feront :)

Cimer, 05/08/2008 13:41:

Tout d'abord un grand MERCI pour ce script.

En ce qui me concerne, j'ai du faire une petite modif pour le faire fonctionner (le div à scroller contient des listes ul). J'ai rajouté dans la 3eme boucle if un traitement particulier dans le cas où Objet.style.top est égal à zéro. En effet, dans ce cas là, parseInt(Objet.style.top) me renvoie “NaN” alors que perseInt(+Objet.style.top) me renvoie zéro.

J'ai lu que je suis la seule dans ce cas alors me suis je trompée quelque part?

OREL, 31/10/2008 15:46:

Vraiment nikel !!

Mais comme les autres j'aimerai bien avoir ma barre de scroll sur le coté…

“voilà j'aimerais mettre une barre de défilement entre les deux flèches… J'en ai déjà vu mais j'ai jamais réussi à piger comment tout paramétrer pour j'ai ce que je veux au final et je commence à désespérer ! Y'a une solution ? ”

Si quelqu'un a la solution merci de la poster !!

++

jougdaiser, 06/11/2008 11:13:

vraiment c'est formidable mais ça lui manque une petite qui est importante. comment rendre les boutons de defilement invisible lorsque la liste n'est pas assez longue et ne necessite pas de scroll: comme scrollbars=“auto”. avec ce script les boutons sont tjrs là. si quelqu'un a une idée comment modifier le script pour changer a hidden les bouton dans le cas d'un petit contenu.

merci d'avance

arcuce, 24/11/2008 00:48:

bonjour , j'ai essayer ton script et je le trouve vraiment pas mal il resout un gros pb graphique sur mon site et s'integre parfaitement ,cependant il y a un petit bug en fait je me retrouve avec la derniereligne de texte (“par exemple”)manger de x pixel suivant le pas que j'applique alors jai essayer avec un pas de 1px le texte s'affiche correctement mais si j'applique un pas different mas derniere ligne ne s'affiche pas correctement alors le probleme vient peutetre du fait que par exemple si mon pas est de 4 et qu'il me reste 3px pour finir la div j'aurai un probleme car le pas est trop grand, donc est ce que ce bug est apparent chez vous aussi ?

je n'ai rien modifier au niveau du javascript et rien de vraiment evident au niveau du css(mis a part la largeur et la hauteur )

armi, 02/12/2008 07:48:

Bonjour, est ce qu'il est possible de boucler le scroll? J'ai affiché des images et j'aimerais qu'il boucle de gauche à droite et de droite à gauche. Merci d'avance

clacla, 06/01/2009 14:55:

Bonjour, J'ai utilisé ce script très pratique et efficace, et j'aurais une petite question : est-il possible de lier la mollette de la souris au défilement provoqué au passage sur les boutons ? Et si oui comment ? Merci d'avance !

Isaah, 06/02/2009 00:39:

Salut, j'ai un problème avec le script.

Premièrement, je voudrais que le défilement soit horizontal alors j'ai modifié les offsetHeigh par offsetWidth et les Top par des Left dans le code Javascript, mais ça ne change rien. C'est normal ? Deuxièmement, je ne comprends pas ce que je dois faire à la fin de la deuxième partie :

<div style="background-color:#0F0; width:22px; height:280px; position:absolute; right:0; border-left:1px solid #000;">
	<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
	<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" />		
</div>

Si quelqu'un pouvait m'aider, ce serait très sympa, merci. ^^

Jéjé, 10/05/2009 19:42:

Salut j'ai mis ce script sur mon site et c'est nickel. Je voudrais l'améliorer en accélérant le défilement quand on clic sur l'icône. Donc si quelqu'un sait faire ça… En tout cas merci au gars qui à pondue ce petit bijoux.

eol, 26/06/2009 00:40:

Pertinent ce bon petit code ! Dommage pour le curseur de défilement qui n'est pas encore fait. ”..De plus ajouter un curseur risque de rendre les choses beaucoup plus compliquées…” et ne le sera pas par toi sans doute ? Si jamais quelqu'un le fait, je lui érige une statueWeb ;-)

Chargement en cours...

Recréer une scrollbar en javascript

Déplacement géré par javascript

Positionnement des bloque grâce au css

Démo

Discussion