JavaScript / Scrollbar

Yaninho Messages postés 484 Date d'inscription Statut Membre Dernière intervention -
Vigli Messages postés 166 Date d'inscription Statut Membre Dernière intervention - 29 avril 2009 à 11:42

Bonjour,

Je suis toujours aussi novice en JavaScript^^. Je voudrais pouvoir ajouter une scrollbar sur un <div>. Cette scrollbar doit être personnalisable (image en haut, en bas, couleur ...) et (et c'est surtout ça) doit avoir un curseur (personnalisable aussi) qui s'adapte à la taille de la page.

C'est un travail que j'ai à faire dans le cadre d'un stage, donc je n'ai pas trop le choix quand aux caractéristiques. Connaissez vous un script qui fait ce genre de choses, ou des pistes svp ?

Merci

Afficher la suite

A voir également:

JavaScript / Scrollbar
Telecharger javascript - Télécharger - Langages
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Erreur #125 javascript - Forum Mozilla Firefox
Afficher un tableau javascript en html ✓ - Forum Javascript
Javascript arrondi - Forum Javascript

1 réponse

Réponse 1 / 1

Vigli Messages postés 166 Date d'inscription Statut Membre Dernière intervention 26

Bonjour, et bien si c'est un travail que tu as a faire, ne te le fait pas faire par quelqu'un d'autre ou ne reprends pas un travail déja fait, moi je dis ça car, rien de mieux pour apprendre que de faire par soit-même.

Sinon tu peut, sans entrer dans les détails demandés, t'inspirer de ça:

<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” )

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.

<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.

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

a javascript error occurred in the main process

Votre réponse

Discussions similaires