Attribut scroll-snap-type CSS

Définition et utilisation

scroll-snap-type L'attribut spécifie comment l'élément s'attache à l'élément focal et dans quelle direction il s'attache lorsque vous arrêtez de faire défiler.

Pour réaliser le comportement d'adhérence de défilement, il est nécessaire de configurer cette propriété sur l'élément parent. scroll-snap-type Propriété, et configurez-la sur les éléments enfants scroll-snap-align Propriété.

Exemple

Exemple 1

Définit la fonction d'adhérence de défilement sur l'axe x :

#container {
  scroll-snap-type: x mandatory;
}

Essayez-le vous-même

Exemple 2 : Définit un comportement d'adhérence sur les axes x et y

Définit l'adhérence sur les axes x et y scroll-snap-type Propriété :

#container > div {
  scroll-snap-type: both mandatory;
}





Essayez-le vous-même

Exemple 3 : Comportement d'adhérence avec proximité

Définit un comportement d'adhérence avec proximité sur les axes x et y scroll-snap-type Propriété. Lorsque l'opération de défilement s'arrête exactement au milieu de deux éléments, l'adhérence n'est pas effectuée :

#container > div {
  scroll-snap-type: both proximity;
}





Essayez-le vous-même

Grammaire CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Valeur de l'attribut

Valeur Description
none Aucun effet d'adhérence de défilement. Valeur par défaut.
x Définit un effet d'adhérence de défilement sur l'axe x.
y Définit un effet d'adhérence de défilement sur l'axe y.
block Définit un effet d'adhérence de défilement dans la direction en bloc.
inline Définit un effet d'adhérence de défilement dans la direction en ligne.
both Définit un effet d'adhérence de défilement sur les axes x et y.
mandatory Après la fin de l'opération de défilement, le défilement se déplace automatiquement vers le point d'adhérence.
proximity

Similaire à mandatory, mais moins strict.

Après la fin de l'opération de défilement, le défilement se déplace automatiquement vers le point d'adhérence, mais il y a une zone sans effet d'adhérence entre les points d'adhérence.

Dépend des paramètres du navigateur.
initial Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut : none
Héritabilité : Non
Création d'animation : Non pris en charge. Voir :Attributs liés aux animations.
Version : CSS3
Grammaire JavaScript : object.style.scrollSnapType="x mandatory"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opéra
69.0 79.0 99.0 11.0 56.0

Pages associées

Référence :Attribut scroll-snap-align CSS