# scroll-snap pour une galerie de miniatures dans un sélecteur de médias

> Un défilement horizontal de vignettes gagne en confort avec scroll-snap plutôt qu'un script de défilement personnalisé, sans dépendance JavaScript.

- Auteur : WordPress Développement
- Publié le : 2024-03-07
- Mis à jour le : 2024-03-07
- Catégorie : Extensions
- URL : https://www.wpmoderne.fr/extensions/scroll-snap-galerie-miniatures-selecteur-medias/

## L’essentiel

- scroll-snap-type définit l'axe et la rigueur de l'alignement
- scroll-snap-align positionne chaque vignette dans son conteneur
- Aucune dépendance JavaScript n'est nécessaire pour ce comportement

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

> L'essentiel à retenir : scroll-snap-type définit l'axe et la rigueur de l'alignement ; scroll-snap-align positionne chaque vignette dans son conteneur ; Aucune dépendance JavaScript n'est nécessaire pour ce comportement

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: auto` devient 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-stop` a connu des différences de comportement d'une version à l'autre par rapport à Chrome et Firefox.
- Éviter `mandatory` si 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.