Html - Créer une scrollbar personnalisée

Créer une scrollbar personnalisée

Créer une scrollbar personnalisée

Par Mathieusub, publié le 07/03/2009 à 09:23:26

Etape 1 : Nous allons dans un premier temps créer le code Css, pour définir les dimensions et les couleurs de votre scrollbar.

#scroll {

  width: 235px;

  height: 200px;

  overflow: auto;

  position: relative;

  scrollbar-face-color:#999999;

  scrollbar-arrow-color: #FFFFFF;

  scrollbar-track-color: #FFFFFF;

  scrollbar-highlight-color: #999999;

  scrollbar-darkshadow-color: #FFFFFF;

  scrollbar-shadow-color: #999999;

  scrollbar-3dlight-color: #999999;

}

Voici un shéma pour vous aidez à mettre les couleurs :

Etape 2 : Nous allons maintenant placer notre scrollbar dans une page html.
Code à placer entre les balises body :

<div id='scroll'>

<!--votre contenu ici-->

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

Webtutoriaux.com

Des tutoriaux pour tous les niveaux ! 

<!--fin contenu-->

</div>

Ce code n'est pas conforme aux normes CSS car ses attributs sont propres à Internet Explorer, donc vos scrollbars n'auront pas d'effets sur Firefox ou sur un autre navigateur...

Ajouter un commentaire

Informations sur le tutoriel