CSS Scroll — snap · behavior

01

scroll-snap

Imagine un carrousel de photos ou une page qui "accroche" chaque section quand tu scrolles. C'est exactement ce que fait scroll-snap : le scroll se verrouille automatiquement sur les éléments que tu définis.

Comment ça marche ?

Il faut 2 ingrédients :

Conteneur

L'élément qui a le scroll (overflow)

scroll-snap-type: x mandatory;

"Sur l'axe X, verrouille toujours"

Enfants

Les éléments sur lesquels on s'arrête

scroll-snap-align: center;

"Aligne-moi au centre du viewport"

Les propriétés en détail

scroll-snap-type

conteneur

Définit l'axe et la sévérité du snap.

scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

x / y / both Axe horizontal, vertical, ou les deux

mandatory S'arrête toujours sur un point de snap

proximity S'arrête seulement si proche d'un point

scroll-snap-align

enfants

Où l'élément s'aligne quand le snap se déclenche.

scroll-snap-align: start;
scroll-snap-align: center;
scroll-snap-align: end;

start

center

end

scroll-snap-stop

enfants

Avec un swipe rapide, le navigateur peut sauter des éléments. Cette propriété l'empêche.

scroll-snap-stop: always;  /* ne saute jamais */
scroll-snap-stop: normal;  /* peut sauter */

scroll-padding / margin

conteneur / enfants

Utile quand un header fixe cache le point de snap. On décale le point d'accroche.

/* Sur le conteneur */
scroll-padding-top: 80px;

/* Sur un enfant */
scroll-margin-top: 20px;

Essaie — Carrousel horizontal

x mandatory + center

Scrolle horizontalement :

1

2

3

4

5

/* Le conteneur : active le snap horizontal */
.carrousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Chaque slide : s'aligne au centre */
.slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

Essaie — Sections verticales

y mandatory + start

Scrolle verticalement :

Section A

Section B

Section C

/* Conteneur avec hauteur fixe */
.fullpage {
  height: 300px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Chaque section prend toute la hauteur */
.section {
  height: 100%;
  scroll-snap-align: start;
}

Comparaison — mandatory vs proximity

Scrolle les deux et observe la différence :

mandatory — s'arrête TOUJOURS

1

2

3

4

5

proximity — seulement si proche

1

2

3

4

5

02

scroll-behavior

Quand tu cliques sur un lien d'ancre (<a href="#section">), le navigateur saute directement. Avec scroll-behavior: smooth, il y glisse en douceur.

Les 2 valeurs

auto

Par défaut : le scroll saute instantanément.

smooth

Le scroll glisse de manière fluide.

/* Sur html pour tout le site */
html {
  scroll-behavior: smooth;
}

Fonctionne avec

Liens d'ancres <a href="#id">
element.scrollIntoView()
window.scrollTo()

Ne fonctionne PAS avec

La molette de la souris
Le trackpad
Le scroll tactile (doigt)

Accessibilité

Certains utilisateurs sont sensibles aux animations :

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Essaie — smooth vs auto

Change le mode puis clique sur les liens :

Haut — Aller en bas ↓

Milieu

Bas — Retour en haut ↑

03

scrollbar-color

Par défaut, la scrollbar a le style du navigateur. scrollbar-color te permet de choisir tes couleurs, et scrollbar-width son épaisseur.

Syntaxe

scrollbar-color: <couleur poignée> <couleur piste>;

/* Exemple */
scrollbar-color: #264653 #e0e0d8;

piste (track) — 2e couleur

poignée (thumb) — 1re couleur

scrollbar-color

scrollbar-color: auto;
scrollbar-color: #264653 #e0e0d8;

auto Style par défaut du navigateur

2 couleurs 1re = poignée, 2e = piste

scrollbar-width

scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

auto Épaisseur par défaut

thin Barre plus fine

none Cachée (on peut toujours scroller)

Exemples visuels

Observe la scrollbar dans chaque zone :

Sombre / clair

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

scrollbar-color: #264653 #e0e0d8;

Clair / sombre

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

scrollbar-color: #a0a090 #1a1a1a;

thin

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

scrollbar-width: thin;
scrollbar-color: #2a9d8f #f5f5f0;

none (cachée)

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

scrollbar-width: none;
/* Toujours scrollable ! */

Compatibilité — Fonctionne sur Firefox, Chrome 121+ et Edge 121+. Pour Safari, utiliser ::-webkit-scrollbar en fallback.

Récapitulatif

Tout en un coup d'oeil.

Propriété	Sur quoi ?	Ce que ça fait	Exemple
`scroll-snap-type`	Conteneur	Active le snap (axe + sévérité)	`x mandatory`
`scroll-snap-align`	Enfants	Où l'élément s'aligne	`center`
`scroll-snap-stop`	Enfants	Empêche de sauter un élément	`always`
`scroll-padding`	Conteneur	Décale le point de snap	`scroll-padding-top: 80px`
`scroll-behavior`	html / conteneur	Défilement fluide vers les ancres	`smooth`
`scrollbar-color`	Élément scrollable	Couleurs de la barre	`#264653 #e0e0d8`
`scrollbar-width`	Élément scrollable	Épaisseur de la barre	`thin`