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.

J'ai testé,sans succès, plusieurs solutions pour "styliser" les scrollbars" par défaut du navigateur.

 

  1. la bibliothèque Jquery "mCustomScrollbar" .

Elle ne fonctionne pas convenablement dans l'univers "Drupal" si l'on a besoin de  l'option axis"yx". Elle est cependant fonctionnelle hors de "drupal" comme vous pouvez le vérifier dans cette fenêtre surgissante dont  le code utilisé est explicité dans les paragraphes ci-desso

  1. le module "scrollbar" de drupal

Le rendu est moins agréable que le rendu obtenu par défaut.

Démo en direct

Voici le rendu obtenu avec les "scrollbar" par défaut du navigateur.

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

Seul le cadre noir (le contenant), a besoin d'être identifié (par un tag, une classe ou un identifiant). 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

Role="leContenant"

Dans "démo en direct", j'ai choisi de repérer le contenant par le tag html  <section role="leContenant"> pour  définir le cadre noir et tout naturellement le tag <aside role="leContenu"> le cadre rouge.

Le style associé  :

section[role=leContenant]{
    width: 100%;
    height: 200px;
    overflow:auto;
}

impose  au contenant de prendre toute la largeur de son enveloppe et limite sa hauteur à 200px.

  • le scrollbar horizontal apparaitra lorsque le contenu à afficher sera plus large que l'enveloppe ;
  • le scrollbar vertical apparaitra lorsque le contenu à afficher sera plus haut  que 200 px ;

Les fichiers

Cliquez sur le bouton pour copier le code
dans le presse papier
    
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
    <link rel="stylesheet" href="index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="index.js"></script-->
    <title>scrollbars </title>
</head>
<body>
    <main class="lEnveloppe">
        <div id="leContenant" >
            <div class="leContenu" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.            
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
End of content.
            </div>
        </div>  
    </main>
</body>
         
Cliquez sur le bouton pour copier le code
dans le presse papier
  
(function($){
       $("#leContenant").mCustomScrollbar({
            setHeight: 250, // fixe la hauteur de la div id="content"
            setWidth: 200, // fixe la largeur de la div id="content"
            axis:"xy",// horizontal scrollbar
            theme:"rounded-dark",
            scrollbarPosition: "outside"
    });
})(jQuery);
Cliquez sur le bouton pour copier le code
dans le presse papier
    
  
lEnveloppe {
    margin: 100px auto 90px;
    max-width: 400px;
    background: #fec;
}
.leContenu {
    padding: 30px 30px;
    width : 350px;
}
body{
    color: #000;
    font-size: 14px;
    font-family: "Verdana",Geneva,sans-serif;
    margin: 0;
    padding: 0;
    min-width: 480px;
}

Cliquer ici pour afficher ces fichiers dans une fenêtre surgissante

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 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ée 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éfilementsoit nécessaire.

Une variante

information complémentaire disponible en cliquant ici 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;
}

Mots clé