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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/margin_and_padding -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/borders -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/width_and_height -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/display_property -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/grid_layout -.-> lab-35256{{"Vertikaler Scroll-Snap"}} css/nesting -.-> lab-35256{{"Vertikaler Scroll-Snap"}} end

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.