Action de défilement de contrôle –

Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Au fur et à mesure de la croissance de la plate-forme Web, elle possède des fonctionnalités imitant des applications natives . Une de ces fonctionnalités est le module de défilement CSS . La capture instantanée permet aux développeurs de définir la distance à laquelle une interface doit se déplacer pendant une action de défilement. Vous pouvez l'utiliser pour créer des diaporamas ou des interfaces paginées, des fonctionnalités qui requièrent actuellement JavaScript et des opérations DOM coûteuses. Une version antérieure de 2013, appelée Scroll Snap Points définissait une approche basée sur les coordonnées et les pixels pour spécifier la distance de défilement. Cette version de la spécification a été implémentée dans Microsoft Edge, Internet Explorer 11 et Firefox.

Chrome 69+ et Safari 11+ implémentent la dernière version de la spécification, qui utilise un modèle d'alignement de boîte. C'est ce sur quoi nous allons nous concentrer dans cette section.

Avertissement:
La plupart des didacticiels de capture instantanée qui flottent actuellement sur le Web sont basés sur la spécification antérieure de points CSS Scroll Snap . La présence du mot «points» dans le titre est un signe que le tutoriel peut s'appuyer sur l'ancienne spécification. Un indicateur plus fiable est toutefois la présence des propriétés scroll-snap-points-x ou scroll-snap-points-y .

est vraiment bien adapté à la présentation de diaporamas, c'est ce que nous allons construire. Voici notre balisage

  
  
  
  
  

  


               




 * {
   box-sizing: border-box;
}

html, body {
    remplissage: 0;
    marge: 0;
}

.slideshow {
  scroll-snap-type: x obligatoire; / * Indique l'axe de défilement et le comportement * /
  débordement-x: auto; / * Doit être soit `scroll` ou` auto` * /
  affichage: flex;
  hauteur: 100vh;
}

.slideshow img {
  largeur: 100vw;
  hauteur: 100vh;
  scroll-snap-align: centre;
}
 L'ajout de  scroll-snap-type  à  .slideshow  crée un conteneur de défilement. La valeur de cette propriété,  x obligatoire décrit la direction dans laquelle nous souhaitons faire défiler la page et la  méthode de sélection stricte . Dans ce cas, la valeur  obligatoire  indique au navigateur qu'il  doit  s'aligner sur une position de capture lorsqu'il n'y a pas d'opération de défilement active. Utiliser  display: flex  garantit simplement que toutes nos images sont empilées horizontalement.
 Maintenant, l'autre propriété dont nous avons besoin est  scroll-snap-align . Cette propriété indique comment aligner la zone de capture de défilement de chaque image dans le port de capture du conteneur de défilement. Il accepte trois valeurs:  début  fin  et  centre . Dans ce cas, nous avons utilisé le centre  ce qui signifie que chaque image sera centrée dans la fenêtre, comme indiqué ci-dessous.
 
 Pour un aperçu plus complet de Scroll Snap, lisez  Défilement bien contrôlé avec Snap CSS  du guide Google Web Fundamentals.
 
  JumpStart HTML5  de SitePoint. Elle écrit sporadiquement sur la technologie de développement Web  sur son blog . Vous pouvez la suivre sur Twitter à  @webinista .