Das Meistern des vertikalen Scroll-Snaps mit CSS

Einführung

In diesem Lab werden wir uns in die Welt der CSS-Programmierung stürzen und ihre verschiedenen Funktionen und Möglichkeiten erkunden. Ziel dieses Labs ist es, die Teilnehmer mit den erforderlichen Fähigkeiten auszustatten, um mit CSS visuell ansprechende und reaktive Webseiten zu erstellen. Durch praktische Übungen und Experimente werden die Teilnehmer ein solides Verständnis der CSS-Syntax, -Selectoren, -Eigenschaften und vieles mehr erlangen.

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 100% von den Lernenden erhalten.

Vertikaler Scroll-Snap

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

Dieser Code erstellt einen scrollbaren Container, der beim Scrollen an Elementen hakt. Um diesen Effekt zu erzielen, werden die folgenden Schritte durchgeführt:

display: grid und grid-auto-flow: row werden verwendet, um eine vertikale Layout zu erstellen.
scroll-snap-type: y mandatory und overscroll-behavior-y: contain werden verwendet, um den Snap-Effekt beim vertikalen Scroll zu erzeugen.
scroll-snap-align mit start, stop oder center kann verwendet werden, um die Snap-Ausrichtung zu ändern.

Hier ist der HTML- und CSS-Code:

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

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 vertikalem Scroll-Snap abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.