JavaScript / Scrollbar
Fermé
Yaninho
Messages postés
484
Date d'inscription
jeudi 19 mars 2009
Statut
Membre
Dernière intervention
30 août 2010
-
29 avril 2009 à 09:17
Vigli Messages postés 166 Date d'inscription mercredi 5 décembre 2007 Statut Membre Dernière intervention 5 juillet 2010 - 29 avril 2009 à 11:42
Vigli Messages postés 166 Date d'inscription mercredi 5 décembre 2007 Statut Membre Dernière intervention 5 juillet 2010 - 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
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
A voir également:
- JavaScript / Scrollbar
- Telecharger javascript - Télécharger - Langages
- Javascript est activé mais ne fonctionne pas ✓ - Forum Réseaux sociaux
- Erreur #125 javascript - Forum Mozilla Firefox
- Node.js javascript runtime virus ✓ - Forum Virus
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
1 réponse
Vigli
Messages postés
166
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
5 juillet 2010
26
29 avril 2009 à 11:42
29 avril 2009 à 11:42
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:
(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.
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.
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.
