Horizontal Scroll Snap in CSS beherrschen

Einführung

In diesem Lab werden wir das Konzept des horizontalen Scroll-Snaps in CSS erkunden. Das Lab wird Sie durch das Erstellen eines horizontal scrollbaren Containers führen, der beim Scrollen an Elementen anhaften wird. Sie werden lernen, wie die Eigenschaft scroll-snap-type und scroll-snap-align verwendet werden, um einen Snap-Effekt zu erzeugen und wie die Ausrichtung des Snaps gesteuert werden kann. Am Ende des Labs werden Sie gut verstehen, wie ein schlanker und benutzerfreundlicher horizontaler Scroll-Layout erstellt wird.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 86% von den Lernenden erhalten.

Horizontal Scroll Snap

index.html und style.css wurden bereits in der VM bereitgestellt.

Um einen horizontal scrollbaren Container zu erstellen, der beim Scrollen an Elementen anhaften wird, folgen Sie diesen Schritten:

Verwenden Sie display: grid und grid-auto-flow: column, um ein horizontales Layout zu erstellen.
Verwenden Sie scroll-snap-type: x mandatory und overscroll-behavior-x: contain, um einen Snap-Effekt beim horizontalen Scroll zu erzeugen.
Ändern Sie scroll-snap-align in start, stop oder center, um die Snap-Ausrichtung anzupassen.

Hier ist ein Beispiel für HTML- und CSS-Code, den Sie verwenden können:

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;
}

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu Horizontalem Scroll-Snap abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.