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.

Démo en direct

 

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.
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.
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.
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.
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.

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 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 "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é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éfilement soit nécessaire.

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;
}