HTML-CSS: Horizontal scroll snap

Last update on March 08 2024 13:35:31 (UTC/GMT +8 hours)

HTML-CSS : Exercise-16 with Solution

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

Use display: grid and grid-auto-flow: column to create a horizontal layout.
Use scroll-snap-type: x mandatory and overscroll-behavior-x: contain to create a snap effect on horizontal scroll.
Change scroll-snap-align to either start, stop or center to change the snap alignment.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS creates a horizontally scrollable container that will snap on elements when scrolling</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<div class="horizontal-snap"><!-- Container with class for horizontally snap elements -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg"></a><!-- Link with image 1 -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg"></a><!-- Link with image 2 -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-3.jpeg"></a><!-- Link with image 3 -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-4.jpeg"></a><!-- Link with image 4 -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-5.jpeg"></a><!-- Link with image 5 -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-6.jpeg"></a><!-- Link with image 6 -->
</div><!-- Closing horizontal-snap div -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

<!DOCTYPE html>: Declaration of the document type as HTML5.
<html>: Opening tag of the HTML document.
<head>: Opening tag of the head section containing metadata and title.
<meta charset="utf-8">: Declares the character encoding of the document as UTF-8.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the device width for better responsiveness.
<title>Using HTML, CSS creates a horizontally scrollable container that will snap on elements when scrolling</title>: Defines the title of the webpage displayed in the browser tab.
</head>: Closing tag of the head section.
<body>: Opening tag of the body section where the content of the webpage resides.
<div class="horizontal-snap">: Defines a container with the class horizontal-snap for horizontally snap elements.
<a href="#"><img src="..."></a>: Anchor tags containing images with links. Each image represents an item within the horizontally scrollable container.
</div>: Closing tag of the horizontal-snap container.
</body>: Closing tag of the body section.
</html>: Closing tag of the HTML document.

CSS Code:

<style>
/* This style block contains CSS code for styling the horizontal-scrolling container and its child elements. */

.horizontal-snap {
  /* Centers the container horizontally, creates a grid layout with columns, and sets the gap between columns */
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  /* Sets the height of the container to 180px plus the gap for vertical padding */
  height: calc(180px + 1rem);
  /* Adds padding around the container */
  padding: 1rem;
  /* Sets the width of the container */
  width: 480px;
  /* Enables vertical scrolling if content overflows */
  overflow-y: auto;
  /* Determines how scroll overflow is handled */
  overscroll-behavior-x: contain;
  /* Defines the scrolling behavior in the x-axis */
  scroll-snap-type: x mandatory;
}

.horizontal-snap > a {
  /* Specifies the alignment of child elements along the snap axis */
  scroll-snap-align: center;
}

.horizontal-snap img {
  /* Sets the width of images within the container */
  width: 180px;
  /* Allows images to expand beyond their original size */
  max-width: none;
  /* Ensures images maintain their aspect ratio */
  object-fit: contain;
  /* Adds rounded corners to images */
  border-radius: 1rem;
}
</style>

Explanation:

The CSS provided styles a container with horizontally scrolling items.
It ensures the container is centered, with a defined width, and a grid layout for its children.
The scroll-snap-type property enables snapping behavior during scrolling.
Child a elements within the container are aligned to the center of the scroll snap axis.
Images within the container are constrained to a width of 180px, maintaining their aspect ratio and having rounded corners.

HTML-CSS Editor:

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