Accueil    Codes    Scrollbar personnalisée
 



Scrollbar personnalisée  Scrollbar personnalisée




Présentation



Voici un exemple de code réalisé en javascript, basé sur jquery, qui permet de remplacer les scrollbars classiques générées par le navigateur en scrollbars customisables avec des styles css et différentes images pour chaque style désiré.

Le principe est de jouer sur la propriété "overflow" des éléments et de remplacer les barres de défilement. Voici un exemple de rendu :



Exemple de scrollbar adaptée sur une div
Le style de celle-ci est positionnée sur overflow auto.



On provoque le dépassement de la hauteur avec du texte
...




...




...


Fin du paragraphe affiché.



Implémentation




Il faut dans un premier temps référencer le dossier contenant les éléments à intégrer dans l'exemple :
- les deux scripts jquery
- le script contenant le comportement et le paramétrage relatifs à la mise en place des scrollbars
- la feuille de style contenant les styles css relatifs à la mise en place des scrollbars
- l'ensemble des images utilisée pour la mise en forme des scrollbars

Ensuite dans la page de mise en place des scrollbars il faut faire référence aux différents scripts et à la feuille de style dans la partie <head> du document :


<link rel="stylesheet" type="text/css" href="jScrollPane.css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript">
$(function(){
   $('#paneOsx').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 15});
});
</script>


On décrit finalement le code html : deux divisions imbriquées, la division parente ayant une hauteur et largeur fixes :


<div class="holder osX" style="border:solid 1px black; height:200px; width:350px;">
   <div id="paneOsx" class="scroll-pane">
      <p>
      Exemple de scrollbar adaptée sur une div
      
      Le style de celle-ci est positionnée sur overflow auto.
      
      
      On provoque le dépassement de la hauteur avec du texte
      ...
      
      
      ...
      
      
      ...
      
      Fin du paragraphe affiché.
      </p>
   </div>
</div>



» Lien vers le site de jScrollPane

TelechargementTélécharger l'exemple de scrollbar personnalisée