Maîtriser le Vertical Scroll Snap avec CSS

Introduction

Dans ce laboratoire, nous allons plonger dans le monde de la programmation CSS et explorer ses diverses fonctionnalités. Le but de ce laboratoire est d'apprendre aux participants les compétences nécessaires pour créer des pages web attrayantes et réactives en utilisant CSS. Par des pratiques manuelles et des expérimentations, les participants acquerront une compréhension solide de la syntaxe CSS, des sélecteurs, des propriétés et bien plus encore.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Vertical Scroll Snap

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Ce code crée un conteneur défilable qui s'accroche à des éléments lors du défilement. Pour obtenir cet effet, les étapes suivantes sont suivies :

display: grid et grid-auto-flow: row sont utilisés pour créer une disposition verticale.
scroll-snap-type: y mandatory et overscroll-behavior-y: contain sont utilisés pour créer l'effet d'accrochage lors du défilement vertical.
scroll-snap-align avec start, stop ou center peut être utilisé pour changer l'alignement de l'accrochage.

Voici le code HTML et CSS :

<div class="vertical-snap">
  <a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>

.vertical-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(180px + 1rem);
  padding: 1rem;
  height: 480px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.vertical-snap > a {
  scroll-snap-align: center;
}

.vertical-snap img {
  width: 180px;
  object-fit: contain;
  border-radius: 1rem;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire Vertical Scroll Snap. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.