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 :
[Vous devez être inscrit et connecté pour voir cette image]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 du document :
- Code:
-
<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 :
- Code:
-
<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>