28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je souhaiterai reproduire le même effet de scrollbar réactive au survol du curseur que l'on trouve actuellement sur Google lorsqu'on recherche des images.

Exemple: http://www.google.fr/search?tbm=isch&hl=fr&source=hp&biw=1680&bih=926&q=chevrolet+camaro&gbv=2&oq=chevrolet+camaro&aq=f&aqi=g10&aql=&gs_sm=e&gs_upl=1043l3307l0l3483l17l12l0l1l1l0l246l1444l2.8.1l11l0#q=chevrolet+camaro&hl=fr&gbv=2&tbm=isch&bav=on.2,or.r_gc.r_pw.&fp=51dc47365f8c2d58&biw=1680&bih=926

Pour ceux qui ont une trop grande résolution qui affiche la page en entier, réduisez votre fenêtre au maximum. Puis survolez la colonne de gauche, une scrollbar apparaît et disparaît aussitôt que vous sortez de la colonne. Cette scrollbar fait toujours la taille exacte de la fenêtre.

Actuellement, je n'ai réussi qu'à intégrer une scrollbar toujours visible qui a tendance à sortir de ma fenêtre (height:100% oblige). Celle de Google est parfaite. On retrouve un cas similaire ici (colonne de droite): http://derstandard.at/1263706418319/Steve-Jobs-Googles-Dont-be-evil-ist-Muell

Savez vous quel code/script utiliser?

Merci. Smiley cligne
Modifié par Charger (06 Sep 2011 - 15:08)
Hello :

L'ami Firebug me donne
#leftnav {overflow: hidden}
#leftnav:hover {overflow-y: auto}
à doubler d'un overflow auto tout le temps présent pour IE6 qui ne reconnait pas le :hover sur les divs.


EDIT: Perso, je ne sais pas quoi en penser. Je ne trouve pas ça super intuitif.
Modifié par Florian_R (06 Sep 2011 - 15:19)
Merci ça marche !

Y a plus intuitif c'est sûr mais cela permet de faire défiler le contenu en gardant à portée de main les fonctionnalités essentielles dans des blocs fixes remplis de liens allant du plus utile au moins utile (ceux qui nécessiteront de scroller).

J'aime Smiley smile