Scroll-snap-type - Astuces CSS

Anonim

La scroll-snap-typepropriété fait 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-y comme si vous placez 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.

Ceci est utile si vous souhaitez arrêter le navigateur à des points spécifiques de la page. Par exemple: un utilisateur parcourant une galerie de photos ne souhaite probablement pas faire défiler une image à mi-chemin - il préférerait probablement que l'image soit «accrochée» à la bonne position pendant qu'elle défile. La capture de défilement donne aux développeurs un moyen purement CSS de gérer ce comportement.

scroll-snap-typeest une propriété obligatoire sur tout conteneur à défilement auquel vous souhaitez ajouter un accrochage de défilement. Il répond à trois questions pour un conteneur de défilement:

  1. Le conteneur utilise-t-il la capture de défilement?
  2. Sur quel axe - x (horizontal), y (vertical), bloc ou en ligne - la capture de défilement doit-elle s'appliquer?
  3. Comment la capture de défilement doit-elle se comporter? Est-il forcé à 100% du temps ou ne prend-il effet que lorsque l'utilisateur se rapproche suffisamment d'une position d'accrochage? Plus d'informations à ce sujet plus tard.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntaxe

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Valeurs

scroll-snap-type accepte les valeurs suivantes:

  • none désactive l'accrochage du défilement.
  • x active l'accrochage du défilement le long de l'axe x uniquement.
  • y active l'accrochage du défilement le long de l'axe y uniquement.
  • block active l'accrochage du défilement le long de l'axe du bloc uniquement.
  • inline active l'accrochage du défilement le long de l'axe en ligne uniquement.
  • bothpermet la capture de défilement le long des deux axes (que vous pouvez appeler xet y, ou inlineet block.
  • mandatory est une valeur de rigueur qui indique au navigateur de toujours aller à une position d'accrochage lorsqu'il n'y a pas de défilement.
  • proximityest une valeur de rigueur qui indique au navigateur d'aller à une position d'accrochage si une action de défilement se rapproche assez d'une position d'accrochage. Si ce n'est pas assez proche, le navigateur ne devrait pas casser et le défilement se comportera normalement.

Exemple

Voir l'exemple de type Pen scroll-snap
par CSS-Tricks (@ css-tricks) sur CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • 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