Comment obtenir un défilement horizontal de vignettes qui s’aligne proprement, vignette par vignette, sans laisser l’utilisateur s’arrêter entre deux images à moitié visibles ? Sur un sélecteur de médias personnalisé, ajouté par une extension à un écran d’administration pour choisir une image parmi une bibliothèque de gabarits visuels, ce comportement de défilement gagne à être natif plutôt que scripté.
La propriété CSS scroll-snap-type, combinée à scroll-snap-align sur les éléments enfants, fournit exactement ce comportement sans une seule ligne de JavaScript, avec un rendu fluide géré directement par le moteur de rendu du navigateur.
Étape 1 : le conteneur de défilement
Le conteneur qui accueille les vignettes reçoit un défilement horizontal classique via overflow-x, complété par scroll-snap-type qui déclare l’axe concerné et la rigueur de l’alignement souhaité :
.selecteur-gabarits {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 8px;
}La valeur mandatory force le navigateur à toujours revenir à un point d’alignement défini après un défilement, même partiel : impossible de laisser deux vignettes affichées à moitié une fois le geste de défilement terminé. La valeur alternative proximity reste plus permissive, elle n’aligne que si le point d’arrêt naturel du défilement se trouve déjà proche d’un point d’alignement défini.
Étape 2 : l’alignement de chaque vignette
Chaque vignette du sélecteur reçoit la propriété scroll-snap-align, qui indique à quel point de l’élément l’alignement doit se faire par rapport au conteneur :
.selecteur-gabarits .vignette {
flex: 0 0 160px;
scroll-snap-align: start;
scroll-snap-stop: always;
}La valeur start aligne le bord gauche de la vignette sur le bord gauche visible du conteneur. Les autres valeurs possibles, center et end, conviennent à d’autres dispositions : une galerie centrée sur l’élément actif, par exemple, tirerait parti de center plutôt que de start.
La propriété scroll-snap-stop: always mérite une attention particulière : elle empêche un défilement rapide, effectué d’un seul geste, de sauter directement plusieurs vignettes sans s’arrêter sur chacune d’elles au passage, un comportement utile quand chaque vignette porte une information distincte qu’il faut pouvoir remarquer même en défilement rapide.
Étape 3 : les boutons de navigation optionnels
Pour les utilisateurs qui préfèrent une navigation au clic plutôt qu’au geste de défilement tactile ou à la molette, deux boutons simples suffisent, sans logique JavaScript complexe : element.scrollBy() déplace le conteneur d’une distance fixe, et l’alignement CSS prend automatiquement le relais pour caler la vignette suivante.
document.querySelector('.bouton-suivant').addEventListener('click', () => {
document.querySelector('.selecteur-gabarits').scrollBy({
left: 172,
behavior: 'smooth'
});
});Ce script reste facultatif : sans lui, le défilement à la souris, au trackpad ou au doigt sur un écran tactile fonctionne déjà correctement grâce au CSS seul. Le script n’ajoute qu’un confort d’accès complémentaire.
Vérifications avant mise en production
- Tester le comportement au clavier : un conteneur avec
overflow-x: autodevient focalisable et navigable aux flèches directionnelles une fois qu’il reçoit le focus, ce qui doit être vérifié avec un lecteur d’écran. - Vérifier le rendu sur Safari, dont le support de
scroll-snap-stopa connu des différences de comportement d’une version à l’autre par rapport à Chrome et Firefox. - Éviter
mandatorysi le contenu du conteneur peut varier fortement en largeur : un alignement trop strict devient inconfortable sur du contenu hétérogène.
Le réflexe que j’applique avant d’écrire le moindre script de défilement personnalisé : vérifier d’abord si scroll-snap ne couvre pas déjà le besoin, ce qui est le cas la majorité du temps pour une simple galerie de vignettes.
En résumé
Trois propriétés CSS suffisent à obtenir un défilement de vignettes qui s’aligne proprement, sans dépendance JavaScript pour le comportement principal. Ce tutoriel porte sur un sélecteur de gabarits personnalisé ajouté par une extension ; la médiathèque native de WordPress suit sa propre interface, distincte de ce composant sur mesure.
