scroll-snap-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2019.

La propriété scroll-snap-align définit la position de la boîte d'accroche (snap positions) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.

Syntaxe

css
/* Valeurs avec un mot-clé */
scroll-snap-align: none;
scroll-snap-align: start end;
scroll-snap-align: center;

/* Valeurs globales */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: unset;

Valeurs

none

La boîte ne définit aucune position d'accroche sur cet axe.

start

Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.

end

Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.

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.

Définition formelle

Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

scroll-snap-align = 
[ none | start | end | center ]{1,2}

Spécifications

Specification
CSS Scroll Snap Module Level 1
# scroll-snap-align

Compatibilité des navigateurs

BCD tables only load in the browser