HTML-CSS: Vertical scroll snap

Last update on March 07 2024 13:22:38 (UTC/GMT +8 hours)

HTML-CSS : Exercise-7 with Solution

Using HTML, CSS create a scrollable container that will snap on elements when scrolling.

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

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html><!-- Opening HTML tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Declaring character encoding -->
<meta name="viewport" content="width=device-width"><!-- Setting viewport for responsiveness -->
<title>Using HTML, CSS create a scrollable container that will snap on elements when scrolling</title><!-- Title of the document -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><!-- Strong tag for preview label -->
<div class="vertical-snap"><!-- Div container with class "vertical-snap" for scrollable container -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-3.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-4.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-5.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-6.jpeg"></a><!-- Anchor tag with image inside -->
</div><!-- Closing div tag -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML code creates a document with a scrollable container containing images.
Comments are added using the HTML comment format () to explain each line of code.
The meta tags set the character encoding and viewport for the document.
The title tag specifies the title of the document.
Inside the body tag, a div container with the class "vertical-snap" is created for the scrollable container.
Inside this container, multiple a tags are used to wrap img tags, creating clickable images.
Each img tag contains the src attribute with the URL of the image.
The strong tag is used for the preview label.

CSS Code:

<style>
/* Opening style tag for CSS */

.w3rcontainer{
   border: 1px solid #cccfdb; /* Setting border style for the container */
   border-radius: 2px; /* Setting border radius for rounded corners */
}

.vertical-snap {
  margin: 0 auto; /* Setting margin to center the container horizontally */
  display: grid; /* Using grid display */
  grid-auto-flow: row; /* Allowing grid items to flow in rows */
  gap: 1rem; /* Setting gap between grid items */
  width: calc(180px + 1rem); /* Setting width for the container */
  padding: 1rem; /* Adding padding to the container */
  height: 480px; /* Setting height for the container */
  overflow-y: auto; /* Adding vertical scroll overflow */
  overscroll-behavior-y: contain; /* Controlling behavior when reaching the edge during scrolling */
  scroll-snap-type: y mandatory; /* Specifying snapping behavior for scrolling */
}

.vertical-snap > a {
  scroll-snap-align: center; /* Setting alignment for snapping */
}

.vertical-snap img {
  width: 180px; /* Setting width for the images */
  object-fit: contain; /* Controlling how the images fit within their container */
  border-radius: 1rem; /* Adding border radius to the images for rounded corners */
}

</style>
<!-- Closing style tag -->

Explanation:

The CSS code defines styles for a scrollable container with snapping behavior.
Comments are added using the CSS commenting format (/* comment */) to explain each CSS rule and declaration.
The .w3rcontainer class styles the container with a border and border radius.
The .vertical-snap class styles the scrollable container with grid layout, defined height, and overflow properties for vertical scrolling.
The scroll-snap-type property is used to specify the snapping behavior for scrolling.
The .vertical-snap > a selector sets the alignment for snapping each grid item.
Images within the container are styled with a specific width, object-fit, and border radius for proper display.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.