Le défilement ou scroll en CSS est une fonctionnalité essentielle pour la navigation sur les pages web, en particulier sur les appareils mobiles où l’espace d’écran est limité. Plusieurs propriétés CSS permettent d’affiner et de contrôler le comportement du défilement pour améliorer l’expérience utilisateur. Ce tutoriel explore les propriétés CSS scroll-behavior, scroll-margin, scroll-padding et scroll-snap-type, avec des exemples concrets pour illustrer leur utilisation.
Le défilement ou scroll est un élément crucial de l’expérience utilisateur sur le web, permettant de naviguer dans des contenus qui dépassent la zone visible de l’écran.
Fluidifier la navigation avec la propriété CSS scroll-behavior
La propriété scroll-behavior définit le comportement du défilement lors d’interactions utilisateur ou d’animations CSS. Elle permet de choisir entre un défilement instantané ou progressif. Pratique pour les liens (ancre) menant à des endroits différents de la même page. Cette propriété a principalement deux valeurs :
auto: Le défilement se fait immédiatement sans animation.smooth: Le défilement est animé de manière fluide.
html {
scroll-behavior: smooth;
}Définir des points d’accroche avec scroll-snap-type
La propriété scroll-snap-type permet de créer une expérience de défilement saccadé, où le contenu s’aligne automatiquement sur une position définie lorsqu’il est défilé. Les valeurs clés incluent none (par défaut), x, y, et block.
<div id="scrollcontainer">
<div class="scroll-page" id="pageA">A</div>
<div class="scroll-page" id="pageB">B</div>
<div class="scroll-page" id="pageC">C</div>
</div>#scrollcontainer {
border: 1px solid #000;
display: block;
height: 200px;
overflow-y: scroll;
width: 200px;
scroll-snap-type: y mandatory; /* y : Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement. */
}
.scroll-page {
align-items: center;
display: flex;
font-size: 5em;
height: 100%;
justify-content: center; /* Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe. */
scroll-snap-align: start;
}
#pageA {background: #ddd;}
#pageB {background: #aaa;}
#pageC {background: #777;}Dans cet exemple, lorsque vous faites défiler le conteneur .container, les sections s’aligneront automatiquement en haut de la fenêtre de visualisation.
La propriété CSS scroll-snap-type
La propriété CSS scroll-snap-type définit le type de défilement par accrochage dans un conteneur. Elle permet de contrôler le comportement du défilement lorsqu’il arrive à des points d’accrochage définis par la propriété scroll-snap-align. Ses valeurs possibles :
none: Valeur par défaut. Le défilement par accrochage est désactivé. Le contenu se déplace librement dans le conteneur.mandatory: Le défilement s’arrête toujours aux points d’accrochage. Le contenu ne peut pas dépasser ces points.proximity: Le défilement s’arrête aux points d’accrochage si la vitesse de défilement est suffisamment lente. Sinon, le contenu peut les dépasser légèrement.
La propriété CSS scroll-snap-align
La propriété CSS scroll-snap-align définit la position d’alignement des éléments lorsqu’ils arrivent à un point d’accrochage dans un conteneur avec le défilement par accrochage activé scroll-snap-type. Elle permet de contrôler la façon dont les éléments se positionnent par rapport aux bords du conteneur de défilement. Ses valeurs possibles :
start: Valeur par défaut. Les éléments s’alignent au début du conteneur de défilement (à gauche ou en haut, selon l’axe de défilement).end: Les éléments s’alignent à la fin du conteneur de défilement (à droite ou en bas, selon l’axe de défilement).center: Les éléments s’alignent au centre du conteneur de défilement (à la fois horizontalement et verticalement).align-items: Les éléments s’alignent en fonction de la propriétéalign-itemsdéfinie pour leur conteneur parent.justify-content: Les éléments s’alignent en fonction de la propriétéjustify-contentdéfinie pour leur conteneur parent.
Définir une marge avec scroll-margin
La propriété CSS scroll-margin permet de définir une marge autour d’un élément lorsque celui-ci est défilé dans la vue. Cela peut être utile pour s’assurer qu’un élément n’est pas collé aux bords de la fenêtre de visualisation lorsque vous y défilez.
<div id="scrollcontainer">
<div class="scroll-page" id="pageA">A</div>
<div class="scroll-page" id="pageB">B</div>
<div class="scroll-page" id="pageC">C</div>
</div>#scrollcontainer {
border: 1px solid #000;
display: block;
height: 200px;
overflow-y: scroll;
width: 200px;
scroll-snap-type: y mandatory; /* y : Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement. */
}
.scroll-page {
align-items: center;
display: flex;
font-size: 5em;
height: 100%;
justify-content: center; /* Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe. */
scroll-snap-align: start;
}
#pageA {
background: #ddd;
}
#pageB {
background: #aaa;
scroll-margin-top: 20px;
}
#pageC {
background: #777;
scroll-margin: 20px 0 20px 0;
}Dans cet exemple, lorsque vous faites défiler sur la deuxième ou troisième section, celles-ci ne seront pas collées en haut de la fenêtre mais auront une marge de 20px.
À noter que la propriété CSS scroll-margin est une super propriété ou raccourci qui regroupe les propriétés scroll-margin-top, scroll-margin-right, scroll-margin-bottom et scroll-margin-left.
Définir une marge avec scroll-padding
La propriété scroll-padding est utilisée pour ajouter un espace à l’intérieur d’un conteneur défilable, similaire à la marge intérieure padding mais spécifique au défilement.
Elle s’utilise de la même manière que la propriété CSS scroll-margin
Remarques importantes
- Le support des propriétés CSS
scroll-behavior,scroll-margin,scroll-paddingetscroll-snap-typeest variable selon les navigateurs. Il est important de vérifier la compatibilité avant de les utiliser en production. - Les propriétés
scroll-snap-typeetscroll-behaviordoivent être définies sur les éléments parents, tandis quescroll-marginetscroll-paddings’appliquent aux éléments enfants. - L’utilisation judicieuse de ces propriétés permet d’améliorer l’accessibilité de vos pages web en facilitant la navigation pour les utilisateurs, notamment ceux qui utilisent des technologies d’assistance.
Les propriétés CSS scroll-behavior, scroll-margin, scroll-padding et scroll-snap-type offrent des moyens puissants pour contrôler et améliorer le comportement de défilement des éléments sur une page web. En utilisant ces propriétés, les développeurs peuvent créer des expériences de défilement plus naturelles et plus agréables pour les utilisateurs.
