18007 sujets

Questions générales et questions de débutants

[résolu]Créer des boutons de défilement à la place d'une scrollbar

Bonjour,

Je souhaite créer des boutons de défilement vertical à la place d'une scrollbar.
J'ai cru comprendre qu'il s'agissait de déplacement de calque dans une div et que JS serait mon ami.
Je précise que je suis très nulle en JS.

Merci encore, bonnne journée
hello

j'ai trouvé!

<script language="javascript">
    
    var Timer;
    var Pas = 3;
    
    function moveLayer(Sens)
    {
        if(document.getElementById)
            Objet = document.getElementById("Contenu");
        else
            Objet = document.all["Contenu"];
        if(parseInt(Objet.style.top) + (Pas*Sens) > 0)
            Objet.style.top = "0px";
        else
            Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";
        Timer = setTimeout("moveLayer(" + Sens + ");", 30);
    }

</script>


Pour modifier la vitesse de défilement, il faut modifier la valeur de la var Pas et du setTimeout.

Dans le body :


  <div id="Support" style="position:absolute;width:380px;height:280px;overflow:hidden; float:left;">	
	<div id="Contenu" style="position:absolute;width:380;height:200px;left:0;top:0">
		<p>blabla</p>  
	</div>
 </div>	
		
	<div id="bouton">		
	<a href=" # " onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);">
	<img class="img1" src="arrowleft.gif"></a>
	<a href=" # " onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);">
	<img class="img2" src="arrowright.gif"></a> 
	</div>


Bizarrement quand je mets les styles des div support et contenu dans ma css, le script ne marche plus!
Enfin bref là ça fonctionne.

A plus Smiley biggrin
Modifié par mimimoda (18 Apr 2006 - 16:32)
Juste pour te dire, j'ai fait la même chose que toi, et il est aussi assez intéressant d'avoir un bouton de retour en haut de page (toujours utile) et un bouton bas de page (plus difficile à mettre en place, il faut connaitre la hauteur de la page Smiley ohwell )

au cas où celà pourrait te servir voici le script que j'ai utilisé :

ref_int=null;
topvar=140;
rect_up=0;
rect_down=355;
scroll_amount=5;

with(document.getElementById('conteneur'))
   {
   style.overflow="hidden";
   style.position="absolute";
   style.left="0";
   style.top="140px";
   style.width="450px";
   style.height="1200px";
   style.clip="rect(0px, 450px, 355px, 0px)";
   }
   
with(document.getElementById('defilant'))
   {
   style.width="440px";
   }
   
with(document.getElementById('blocscroll'))
   {
   style.visibility="visible";
   }
   
function scrollh()
   {
   if(ref_int==null)
      {
      ref_int=setInterval("int_up()", 75)
      }
   }
   
function int_down(minvar)
   {
   if(parseInt(document.getElementById('conteneur').style.top)<=minvar)
      {
      stop_it();
      }
   else
      {
	  rect_up+=scroll_amount;
      rect_down+=scroll_amount;
      document.getElementById('conteneur').style.clip="rect("+String(rect_up)+"px, 450px,"+String(rect_down)+"px, 0px)";
      document.getElementById('conteneur').style.top=String(parseInt(document.getElementById('conteneur').style.top)-scroll_amount)+"px";
      }
   }
   
function scrollb(minvar)
   {
   if(ref_int==null)
      {
      ref_int=setInterval("int_down("+minvar+")", 75)
      }
   }
   
function int_up()
   {
   if(parseInt(document.getElementById('conteneur').style.top)>=topvar)
      {
      stop_it();
      }
   else
      {
	  rect_up-=scroll_amount;
      rect_down-=scroll_amount;
      document.getElementById('conteneur').style.clip="rect("+String(rect_up)+"px, 450px,"+String(rect_down)+"px, 0px)";
      document.getElementById('conteneur').style.top=String(parseInt(document.getElementById('conteneur').style.top)+scroll_amount)+"px";
      }
   }
   
function scrollhh()
	{
	document.getElementById('conteneur').style.clip="rect(0px, 450px,355px, 0px)";
    document.getElementById('conteneur').style.top="140px";
    rect_up=0;
    rect_down=355;
	}
	
function scrollbb(minvar)
	{
	rect_up=String(parseInt(140-minvar));
    rect_down=String(parseInt(495-minvar));
	document.getElementById('conteneur').style.clip="rect("+rect_up+"px, 450px,"+rect_down+"px, 0px)";
    document.getElementById('conteneur').style.top=minvar+"px";
	}

function stop_it()
   {
   clearInterval(ref_int);
   ref_int=null;
   }
Sujet clos
Aller à