jQuery - Scrollbar

Ce billet relate les éléments essentiels à la mise en place de scrollbars (ascenseurs ou barres de défilement) verticaux et horizontaux autour d'un contenu dans une page web.
Ces éléments ont été mis en oeuvre pour la réalisation de cette page qui s'appuie sur la documentation officielle.
Pour cette page,  3 fichiers, qui s'éxécutent côté client, sont utilisés :

  • index.html, le code qui organise la page ;
  • index.js, le script (javascript, sa bibliothèque jQuery et le plugin custom content scroller) ;
  • index.css pour le style.

les fichiers

Description du fichier Index.html

Dans l'entête s'effectuent les appels :

  • aux bibliothèques CSS ( depuis le CDN cdnjs.com)
  • à ma feuille de style "index.css"
  • aux bibliothèque JS (depuis le CDN cdnjs.com)
  • à mon script,

NB : pour que les scrollbars  (barres de défilement) apparaissent, il faut écrire une quantité de texte suffisante dans le "cadre" leContenu.

Le corps de la page est schématisé ci-contre :
Une enveloppe (avec un fond coloré) englobe un "cadre" noir  (ie : leContenant) qui tente de contenir dans un "autre cadre" en rouge notre contenu (du texte frappé au km).
Il est indispensable que le cadre rouge déborde du cadre noir pour qu'un effet de scrolling puisse être appliqué.

Seul le cadre noir : "leContenant", a besoin d'être identifié ( "id=leContenant"). C'est sur lui que s'appliqueront les scrollbars.

Le contenu qui devait occuper la totalité du cadre rouge est "bloqué" dans le cadre noir lors de  l'exécution du script

Le script

Le script "index.js", dont le code est affiché dans l'onglet script .js, se contente de définir le contenu de la méthode mCustomScrollbar() de la bibliothèque du plugin. Dans ce script, la méthode est appliquée sur la balise div identifiée "leContenant" définie dans le fichier index.html ( <div id="leContenant"> </div>).

Cette méthode est passé avec 5 paramètres :

  • setHeight qui fixe la hauteur (de notre cadre noir (leContenant) et doit être inférieure ou égale à la hauteur de l'enveloppe;
  • setWidth qui fixe la largeur (de notre cadre noir (leContenant) ;
  • axis pour la présence des scrollbars horizontaux et verticaux ;
  • theme ;
  • scrollbarPosition.

Le style CSS

Le fichier index.css définit les classes lEnveloppe et leContenu demandées par le fichier index.html par <main class="lEnveloppe"> et <div class="leContenu">

La classe "lecontenu" fixe la largeur du cadre rouge. Celle-ci doit être supérieure à la largeur du "contenant" (cadre noir)  définie dans le script (voir ci-dessus) pour qu'un défilement soit nécessaire.

Une variante

Il est possible d'appliquer la méthode mCustomScrollbar() sur la classe de l'élément div (qui établit le cadre noir "contenant") au lieu de l'appliquer sur l'identification (id) de cet élément : ie remplacer dans le fichier index.html la ligne <div id="leContenant"> par <div class="leContenant">.

Dans ce cas, les paramètres setHeight et setWidth de la méthode deviennent inutile car on spécifiera ces informations dans la déclaration de la classe (dans le fichier index.css) comme indiqué ci-dessous :

.leContenant {
     height : 200px;
     width : 200px;
}