Scrollbar personnalisée

bonjour bonjour
j'aimerais savoir si c'est possible de créer une scrollbar en HTML / CSS / JavaScript

http://i85.servimg.com/u/f85/11/95/31/46/temp111.jpg

merci de vos réponses

Bonsoir,

Rien de standard, j'en ai bien peur...

Il existe "scrollbar-face-color" mais c'est une "propriété propriétaire" (à déconseiller donc) d'IE (cela devrait également fonctionner avec NS ?!)
Mais, elle ne devrait pas convenir si tu souhaites une scrollbar à l'identique de l'image postée

L'émulation de cette propriété via javascript est également possible, tu trouveras sur le net quelques scripts tout fait, à personnaliser pour obtenir ce que tu souhaites.
La chose est également possible en Flash, et on peut parfois voir de jolies choses.

Cependant, il faudra s'interroger sur le besoin impérieux de se doter de ce type de "fioritures".
Les internautes ont des habitudes de surf, cela peut s'avérer perturbant, peu ergonomique, non fonctionnel :
propriété propriétaire/javascript/Flash peuvent ne pas fonctionner, ne pas être implémentés, ne pas être désirés, c'est donc un risque sérieux de te priver de certains internautes...

Cdt,
Sylvain

Bonjour,

J'ai trouve rapidement ca :
http://interface.eyecon.ro/demos/scrollbar.html
http://www.kolosseum.co.in/content/home.html
http://www.willjessup.com/sandbox/jquery/scrollbar/scrollbar.html

C'est pas top si on desactive le js (pas acces au reste du texte) surement un overflow:hidden.
Je crois tout de meme que tu peux le rendre accessible, en faisant un bloc overflow auto avec une hauteur definie et a partir de la, faire du javascript non intrusif (qui vire la scrollbar de base et rajoute la nouvelle).

J'aime bien celui-la parce que le scroll fonctionne avec la molette de la souris (l'idee c'est quand meme d'avoir exactement le meme comportement que la scrollbar par defaut):
http://flowplayer.org/tools/scrollable.html

Ah voila un exemple qui fonctionne si le JS est desactive mais pas a la molette : http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side-scroll.html
(pour l'avoir vertical : http://jquery-ui.googlecode.com/svn/trunk/demos/slider/slider-vertical.html)

Donc voila, a toi de le faire a ta sauce.
Mais comprend bien qu'on ne peut PAS styler une scrollbar, on peut juste la supprimer et la remplacer par un ou plusieurs element(s) qui semblera(ont) avoir le meme comportement.
Essaye de faire ca proprement

K-feine a écrit :
Essaye de faire ca proprement

Rien de propre dans cette démarche ...
Une seule solution : idée à laisser tomber ...
Comme dit par 6l20 ce n'est pas une bonne idée notamment en terme d'accessibilité.
Modifié par yodaswii (23 Mar 2009 - 15:05)

Dai a écrit :
j'aimerais savoir si c'est possible de créer une scrollbar en HTML / CSS / JavaScript

Une vraie scrollbar, non.
Une sorte de widget HTML-CSS-JS qui émule en partie le comportement d'une scrollbar sans y correspondre totalement à cause de limitations techniques et du simple fait que c'est pas la même chose: oui.

Conseil: garder la scrollbar «normale».

(Notons que pour des «sliders», c'est une autre affaire, vu que ça n'existe pas en natif.)

WebKit implémente une solution élégante pour styler les barres de défilement, mais ça ne touche évidemment pas grand monde…

Si on n'a pas le choix et qu'il faut absolument avoir ce type de comportement sur un site, on peut aussi utiliser jScrollpane.
C'est simple et facile à mettre en place.

A utiliser avec Mouse Wheel Extension, qui permet de pouvoir se servir de la molette de la souris au dessus du bloc concerné.