Bonjour à tous, Je suis sur la réalisation d'un site et j'en suis à une partie javascript qui est une barre de défilement verticale. En faisant quelque recherche je suis presque arrivé à se que je souhaitais, grâce à ce code JS

// JavaScript Document




var speed = 0; //détermine le sens de défilement (1, -1 ou 0 pour l'arrêt)
function scroll(to_scroll, no_speed_change){
	if(!no_speed_change) speed = to_scroll; //on ne modifie pas la vitesse si la fonction a été appelée par elle-même pour éviter une boucle infinie
	if(speed !=0){
		document.getElementById('adefiler').scrollTop += (speed*10); //le défilement se fait par 10px
		setTimeout('scroll('+to_scroll+', '+true+')', 10);
	}
}

http://www.imagup.com/img/xerel/593929.html

Dpnc lorsque je clique sur la flèche du haut et du bas le contenu texte monte ou descend. Mais j'aimerais également que la barre entre les deux flèches se déplace proportionnellement a la "height" du contenu. Je suis plutôt novice en JS, donc si quel'qun pouvait m'aider.

Voici mon Html si besoin:

<div id="contenudroite">
<div id="support">
<div id="cadrebarre">
<div id="souscadrebarre">

<div id="haut"><a href="javascript:;" onmousedown="scroll(-1);" onmouseup="scroll(0);"><img src="../images/flechehaut.jpg" title="" name="" alt=""/></a>
<div id="entrefleches">
<div id="barre">
 
</div>
</div>
<div id="bas"><a href="javascript:;" onmousedown="scroll(+1);" onmouseup="scroll(0);"><img src="../images/flechebas.jpg" title="" name="" alt=""/></a></div>
</div>
</div>
</div>


<div id="adefiler">
<div class="texte">
                                          										<h4>Le 13/05/09</h4>
                                          										<h3>Titre de l'actualité</h3>
                                          										<p> Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte 				 																					standart d'actualités Texte standart d'actualités Texte standart d'actualitésTexte standart exte stasstandart d'actualités   																					Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte </p>
                                                            </div>
                                                            <div id="image"><img src="../images/image1.jpg" name="" title=""/>
                                                            </div>
                                      
                       
                                        					<div class="texte">
                                                                                <h4>Le 13/05/09</h4>
                                                                                <h3>Titre de l'actualité</h3>
                                          										<p> Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte 							 																					standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte standart Texte standart d'actualités  					 																					Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte standart d'actualités Texte </p>
                                                            </div>
                                 	                        <div id="image"><img src="../images/image2.jpg" name="" title="">
                                                            </div>
	
</div>
</div>
</div>

Et le CSS :

#contenudroite
	{ width:418px;
	  height: 435px;
	  float:right;
	  }
	  
	  
   #cadrebarre
   { width: 36px;
     height: 415px;
	 background-color: #000000; 
	 float:left;
	 margin-right: 5px;
    }
	
	
	#souscadrebarre
	{ height: 415px;
	  width: 12px;
	  margin: auto;
	  }
	
	#haut
	{ height: 17px;
	  width: 12px;
	  }
	  
	 #entrefleches
	 {height: 362px;
	 padding-top: 2px;
	 padding-bottom: 2px;
	  
	  
	  
	 }
	 
	 #barre
	 { height: 193px;
	   width: 12px;
	   background-image: url(../images/barrededefilement.jpg);
	   }
	  
	  #bas
	{ height: 17px;
	  width: 12px;
	  }
	  
	
	#support
	{ 
	  height: 400px;
	  border: 0px solid red;
	  margin-top: 15px;
	
	  
	  }
	  
	  
	  #adefiler
	{ 
	  height: 380px;
	  width: 377px;
	  border: 0px solid red;
	  margin-top: 15px;
	  float:right;
	  overflow:hidden;
	  
	  }
	  
	  
	  #image
	  { float:right;
		width: 150px;
		height: 150px;
		margin-top: 20px;
		margin-right: 10px;
		}
	  
   
   .texte h3, .texte h4
   { color: #fd0389;}
   
   .texte h3
   { text-align:center;}
   
   
   
   
   .texte
   { font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
	 color: #FFFFFF;
	 text-align: justify ;
	 width: 200px;
	 height: auto;
	 float:left;
	 }

up!