Scroll-snap-align - Astuces CSS

Anonim

scroll-snap-alignfait partie du module CSS Scroll Snap. La capture de défilement fait référence au «verrouillage» de la position de la fenêtre sur des éléments spécifiques de la page lorsque la fenêtre (ou un conteneur à défilement) fait défiler. Pensez à un conteneur qui capture le défilement, comme placer un aimant au-dessus d'un élément qui colle en haut de la fenêtre et oblige la page à arrêter de défiler à cet endroit.

scroll-snap-alignest une propriété obligatoire pour un élément d'accrochage de défilement dans un conteneur d'accrochage de défilement. Pour plus d'informations sur les conteneurs d'accrochage de défilement, consultez l' scroll-snap-typeentrée almanach. scroll-snap-alignindique au navigateur quelle partie d'un élément doit être aligné lorsqu'un point Calage est rencontré: Si l'élément logiciel enfichable à la start, centerou enddu conteneur parent qui contient la scroll-snap-typepropriété?

Si vous voulez qu'un élément se mette en place au début de cet élément, donnez-lui une scroll-snap-alignvaleur comme ceci:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntaxe

scroll-snap-align: ( none | start | end | center )(1,2)

Vous pouvez spécifier jusqu'à 2 valeurs pour cette propriété, représentant respectivement le bloc et les axes en ligne. Si vous ne donnez qu'une valeur, cette valeur sera utilisée pour les deux axes.

Valeurs

scroll-snap-align accepte les valeurs suivantes:

  • none désactive l'accrochage du défilement sur l'élément
  • start aligne le début de l'élément avec le snapport du conteneur de défilement lorsqu'il est mis en place
  • end aligne la fin de l'élément avec le snapport du conteneur de défilement lorsqu'il est mis en place
  • center aligne le centre de l'élément avec le snapport du conteneur de défilement lorsqu'il est mis en place

Exemple

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
69 68 11 * 79 11

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 11,0-11,2

En rapport

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ressources

  • Recommandation du candidat CSS Scroll Snap W3C
  • Capture de défilement CSS pratique
  • Présentation des points d'accrochage CSS Scroll