Bootstrap - Scrollspy : Guide pour débutants

Bonjour à tous, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans une fonctionnalité passionnante de Bootstrap appelée Scrollspy. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider pas à pas, comme j'ai fait pour mes élèves au fil des ans. Alors, prenez une tasse de café et c'est parti !

Bootstrap - Scrollspy

Qu'est-ce que le Scrollspy ?

Avant de nous pencher sur les détails techniques, comprendre ce qu'est le Scrollspy. Imaginez que vous lisez un long article en ligne, et que, au fur et à mesure que vous faites défiler, le menu de navigation surligne automatiquement la section que vous êtes en train de lire. C'est le Scrollspy en action ! Il s'agit d'une petite fonctionnalité pratique qui améliore l'expérience utilisateur en fournissant un retour visuel sur la position actuelle de l'utilisateur dans le contenu.

Fonctionnement

Le Scrollspy fonctionne en surveillant la position de défilement de votre page web et en mettant à jour l'état actif de vos éléments de navigation en conséquence. C'est comme avoir un petit espion (d'où le nom !) qui observe où vous êtes sur la page et dit à votre menu de navigation, "Hey, l'utilisateur est ici maintenant !"

Regardons un exemple de base :

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Section 1</h4>
<p>...</p>
<h4 id="section2">Section 2</h4>
<p>...</p>
</div>
</body>

Dans cet exemple, nous disons à Bootstrap de surveiller la position de défilement (data-bs-spy="scroll") et de mettre à jour la navigation dans #navbar-example. Au fur et à mesure que vous faites défiler le contenu, l'élément de navigation correspondant sera surligné.

Barre de navigation

L'une des utilisations les plus courantes de Scrollspy est avec une barre de navigation. Regardons un exemple plus détaillé :

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Barre de navigation</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Premier</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Deuxième</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">Premier en-tête</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Deuxième en-tête</h4>
<p>...</p>
</div>

Dans cet exemple, nous avons une barre de navigation avec deux liens. Au fur et à mesure que vous faites défiler le contenu, l'élément de la barre de navigation correspondant sera surligné. C'est comme avoir un GPS pour votre page web !

Navigation imbriquée

Parfois, vous pourriez vouloir avoir des éléments de navigation imbriqués. Scrollspy peut gérer cela aussi ! Voici comment :

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Barre de navigation</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Élément 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Élément 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Élément 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Élément 2</a>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Élément 1</h4>
<p>...</p>
<h5 id="item-1-1">Élément 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Élément 1-2</h5>
<p>...</p>
<h4 id="item-2">Élément 2</h4>
<p>...</p>
</div>

Cela crée une structure de navigation imbriquée qui se met à jour au fur et à mesure que vous faites défiler les différentes sections et sous-sections. C'est comme avoir des chapitres et sous-chapitres dans un livre, mais interactif !

Groupe de listes

Scrollspy n'est pas limité aux seules barres de navigation. Vous pouvez l'utiliser avec des groupes de listes aussi :

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Élément 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Élément 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Élément 1</h4>
<p>...</p>
<h4 id="list-item-2">Élément 2</h4>
<p>...</p>
</div>

Cela crée un groupe de listes qui se met à jour au fur et à mesure que vous faites défiler le contenu. C'est comme avoir une table des matières qui sait exactement où vous êtes dans le livre !

Liens d'ancrage simples

Parfois, vous pourriez vouloir utiliser des liens d'ancrage simples au lieu d'une barre de navigation complète ou d'un groupe de listes :

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Barre de navigation</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

Cela crée des liens d'ancrage simples qui se mettent à jour au fur et à mesure que vous faites défiler. C'est comme avoir des signets dans votre page web qui s'allument lorsque vous les atteignez !

Éléments non visibles

Scrollspy peut même fonctionner avec des éléments qui ne sont pas initialement visibles :

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Barre de navigation</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">un</h4>
<p>...</p>
<h4 id="two">deux</h4>
<p>...</p>
<h4 id="three">trois</h4>
<p>...</p>
</div>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

Dans cet exemple, même si certains éléments ne sont pas visibles initialement, Scrollspy fonctionnera avec eux lorsqu'ils apparaîtront en vue. C'est comme avoir un espion qui peut voir à travers les murs !

Utilisation

Pour utiliser Scrollspy, vous devez faire trois choses :

Ajoutez data-bs-spy="scroll" à l'élément que vous souhaitez espionner (généralement le <body>).
Ajoutez data-bs-target="#navId" pour spécifier la navigation à utiliser pour Scrollspy.
Ajoutez data-bs-offset="" pour spécifier les pixels à décaler du haut lors du calcul de la position de défilement.

Voici un tableau de toutes les attributs de données que vous pouvez utiliser :

Attribut	Description
data-bs-spy	Active Scrollspy
data-bs-target	Spécifie quelle navigation utiliser pour Scrollspy
data-bs-offset	Pixels à décaler du haut lors du calcul de la position de défilement
data-bs-method	Trouve dans quelle section se trouve l'élément espionné

Options

Vous pouvez également initialiser Scrollspy avec JavaScript :

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

Voici un tableau de toutes les options que vous pouvez utiliser :

Option	Type	Défaut	Description
offset	number	10	Pixels à décaler du haut lors du calcul de la position de défilement
method	string	'auto'	Trouve dans quelle section se trouve l'élément espionné
target	string	''	Spécifie quelle navigation utiliser pour Scrollspy

Propriétés CSS

Scrollspy utilise quelques propriétés CSS pour faire ses merveilles :

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

Les propriétés position: relative et overflow: auto sont cruciales pour que Scrollspy fonctionne correctement.

Et voilà ! Vous êtes maintenant équipé des connaissances pour utiliser la fonctionnalité Scrollspy de Bootstrap. Souvenez-vous, la pratique fait la maîtresse, donc n'ayez pas peur d'expérimenter avec ces exemples. Bon codage, et que votre défilement soit toujours en douceur !

Credits: Image by storyset

Tutoriel précédent:

Bootstrap - Barre de progression

Tutoriel suivant:

Bootstrap - Indicateurs de chargement