Mastering Vertical Scroll Snap with CSS

Introduction

In this lab, we will dive into the world of CSS programming and explore its various features and functionalities. The purpose of this lab is to equip learners with the necessary skills to create visually appealing and responsive web pages using CSS. Through hands-on practice and experimentation, learners will gain a solid understanding of CSS syntax, selectors, properties, and more.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 100% positive review rate from learners.

Vertical Scroll Snap

index.html and style.css have already been provided in the VM.

This code creates a scrollable container that snaps to elements while scrolling. To achieve this effect, the following steps are taken:

display: grid and grid-auto-flow: row are used to create a vertical layout.
scroll-snap-type: y mandatory and overscroll-behavior-y: contain are used to create the snap effect on vertical scroll.
scroll-snap-align with either start, stop or center can be used to change the snap alignment.

Here's the HTML and 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;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Vertical Scroll Snap lab. You can practice more labs in LabEx to improve your skills.