Attribut scroll-snap-align CSS

Définition et utilisation

scroll-snap-align Cette propriété spécifie que l'élément va s'attacher à la position du point de focus lorsque vous arrêtez de défilez.

Pour activer l'effet d'attraction du défilement, il est nécessaire de définir cette propriété sur les éléments enfants scroll-snap-align et définir cette propriété sur l'élément parent type de défilement qui attire Propriété.

Exemple

Exemple 1

Lorsque l'utilisateur arrête de défilement, le plus proche de l'élément est吸附é à la position centrale :

div {
  scroll-snap-align: center;
}

Essayez-le vous-même

Exemple 2 : Galerie d'images

scroll-snap-align Cette propriété est très adaptée pour utiliser le défilement en regard des galeries d'images. Ici, la direction de défilement est horizontale, et le mode d'alignement d'attraction est centré. Lorsque l'utilisateur relâche la barre de défilement, l'image la plus proche se fixe au centre de la zone défilable. Essayez de cliquer sur une image, puis utilisez les flèches de的方向 à droite et à gauche pour les naviguer :

#container > img {
  scroll-snap-align: none center;
}
Beijing Danseuse Wuhan Tulipe Hangzhou

Essayez-le vous-même

pont enjambée dans la jungle des montagnes, homme avec appareil photo, Cinque Terre

Exemple 3 : Alignement d'attraction en direction de bloc vertical

Lors du défilement vertical,scroll-snap-align L'attribut peut également être configuré comme le point de départ de l'élément en direction de bloc :

#container > div {
  scroll-snap-align: start none;
}

Essayez-le vous-même

Syntaxe CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Valeur de l'attribut

Valeur Description
none Aucun effet d'attraction de glissement. Valeur par défaut.
start Fait glisser l'élément à l'axe x et y au début de l'élément.
end Fait glisser l'élément à l'axe x et y à la fin de l'élément.
center Fait glisser l'élément à l'axe x et y au centre de l'élément.
block inline Syntaxe bivaluée. La première valeur spécifie le mode d'attraction en direction de bloc, et la deuxième valeur spécifie le mode d'attraction en direction en ligne.
initial Réinitialisez cette propriété à sa valeur par défaut. Voir : initial.
inherit Cette propriété est héritée de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : none
Héritabilité : Non
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollSnapAlign="start"

Prise en charge 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 Opera
69.0 79.0 68.0 11.0 56.0

Pages connexes

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