Maîtriser le défilement horizontal avec prise en charge des points d'arrêt en CSS

Introduction

Dans ce laboratoire, nous allons explorer le concept de défilement horizontal avec prise en charge des points d'arrêt en CSS. Le laboratoire vous guidera dans la création d'un conteneur horizontalement défilemable qui s'arrêtera sur des éléments lors du défilement. Vous apprendrez à utiliser la propriété scroll-snap-type et scroll-snap-align pour créer un effet de prise en charge des points d'arrêt et à contrôler l'alignement des points d'arrêt. À la fin du laboratoire, vous aurez une bonne compréhension de la manière de créer une disposition de défilement horizontal élégante et conviviale pour l'utilisateur.

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 86% de la part des apprenants.

Défilement horizontal avec prise en charge des points d'arrêt

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

Pour créer un conteneur horizontalement défilemable qui s'arrête sur des éléments lors du défilement, suivez ces étapes :

Utilisez display: grid et grid-auto-flow: column pour créer une disposition horizontale.
Utilisez scroll-snap-type: x mandatory et overscroll-behavior-x: contain pour créer un effet de prise en charge des points d'arrêt lors du défilement horizontal.
Changez scroll-snap-align en start, stop ou center pour ajuster l'alignement des points d'arrêt.

Voici un exemple de code HTML et CSS que vous pouvez utiliser :

HTML

<div class="horizontal-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>

CSS

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

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

.horizontal-snap img {
  width: 180px;
  max-width: none;
  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 rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le défilement horizontal avec prise en charge des points d'arrêt. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.