Post
Ask Question

Learn CSS Scroll Snaps

Introduction

Sometimes, we see that while scrolling any website on your mobile devices or laptop, scrolling is not smooth or something abnormal. Scrolling or scrolling is not perfect. Sometimes, some scrolling ends up in the middle or something inappropriate. Scrolling is an important part of any website, whether it is vertical or horizontal. Getting a smooth scrolling experience is very important in web development. So, we can achieve this through CSS Scroll Snaps.

Using CSS Scroll Snap, web developers create the precise, smooth, and best scrolling experiences by defining snap points within scrollable containers. It ensures that as users scroll through a list of items, pages, or sections, they automatically align to specific points, resulting in seamless and clean navigation. This feature is especially useful for content-heavy websites, image galleries, and product sliders.

Benefits of CSS Scroll Snap

  1. Instead of relying on users to stop at the correct points, scroll snapping automatically ensures the content aligns properly.
  2. By making navigation more predictable and responsive, it enhances the user experience, particularly for touch devices.
  3. Scroll Snap eliminates the need for heavy JavaScript-based scroll behavior, reducing the development complexity.

Properties of CSS Scroll Snap

1. scroll-snap-type

This property is about the behavior of scrolling for the container. It defines both axes and also defines how strictly scroll snapping occurs.

Syntax : scroll-snap-type: <axis> <strictness>;

Values for : <axis>

x - Horizontal snapping.
y - Vertical snapping.
block - Based on the writing mode (could be horizontal or vertical).
both - Snapping in both directions (horizontal and vertical).

Values for :  <strictness>

mandatory - Ensures snapping always happens.
proximity - Snaps only when close enough to a defined snap point.

2. scroll-snap-align

This property defines how elements inside the container will snap into place.

Syntax: scroll-snap-align: <value>;

Values for :  <value>

start - The element snaps with its start edge aligned with the container’s start.
center - The element’s center aligns with the container’s center.
end - The element’s end aligns with the container’s end.

3. scroll-snap-stop (Optional)

This property controls whether a snap point is enforced even if the user scrolls quickly through it.

Syntax: scroll-snap-stop: <value>;

Values for :  <value>

normal - Snap only when scrolling slowly.
always - Enforce snapping even with fast scrolling.

Now, learn more about CSS Scroll Snaps through several examples.

Example 1. Horizontal Scroll Snap

Here we create a basic horizontal scrolling example. Here we have strictness as mandatory.

Example1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Scroll Snap Example</title>
  <style>
    .snap-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      width: 100%;
      height: 100vh;
    }

    .snap-child {
      flex: none;
      scroll-snap-align: start;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    .snap-child:nth-child(odd) {
      background-color: #3498db;
      color: white;
    }

    .snap-child:nth-child(even) {
      background-color: #2ecc71;
      color: white;
    }
  </style>
</head>
<body>
  <div class="snap-container">
    <div class="snap-child">Page 1</div>
    <div class="snap-child">Page 2</div>
    <div class="snap-child">Page 3</div>
    <div class="snap-child">Page 4</div>
  </div>
</body>
</html>

.scroll-container: Defines a horizontal scroll area with overflow-x: scroll and uses scroll-snap-type: x mandatory to enforce horizontal snapping.
.scroll-item: Each child element takes up the full viewport width (100vw) and height (100vh), snapping into place at the start (scroll-snap-align: start).

This type of example is used for horizontally scrolling galleries, product slideshows, or content sections.

Output

Example 2. Vertical Scroll Snap

Here, we create a basic vertical scrolling container where elements snap into place, but only when the user scrolls close enough to a snap point (scroll-snap-type: y proximity).

Example2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Scroll Snap Example</title>
  <style>
    .scroll-container {
      height: 100vh;
      overflow-y: scroll;
      scroll-snap-type: y proximity;
    }

    .scroll-item {
      scroll-snap-align: center;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      color: white;
    }

    .scroll-item:nth-child(odd) {
      background-color: #9b59b6;
    }

    .scroll-item:nth-child(even) {
      background-color: #e74c3c;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-item">Section 1</div>
    <div class="scroll-item">Section 2</div>
    <div class="scroll-item">Section 3</div>
    <div class="scroll-item">Section 4</div>
  </div>
</body>
</html>

.scroll-container: Uses scroll-snap-type: y proximity to ensure that sections snap vertically but only when close enough to a snap point.
.scroll-item: Each section aligns to the center of the viewport (scroll-snap-align: center).

This type of example is useful when scrolling pages where you don’t want mandatory snapping, allowing users more control over their scrolling speed.

Output

Example 3. Scroll Snapping in Both Directions

Now, create an advanced example where snapping is enabled in both horizontal and vertical directions (scroll-snap-type: both).

Example3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Both Direction Scroll Snap</title>
  <style>
    .scroll-container {
      width: 100vw;
      height: 100vh;
      overflow: scroll;
      display: grid;
      grid-template-columns: repeat(3, 100vw);
      grid-template-rows: repeat(3, 100vh);
      scroll-snap-type: both mandatory;
    }

    .scroll-item {
      scroll-snap-align: start;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      background-color: #2c3e50;
      color: white;
    }

    .scroll-item:nth-child(odd) {
      background-color: #e67e22;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-item">1</div>
    <div class="scroll-item">2</div>
    <div class="scroll-item">3</div>
    <div class="scroll-item">4</div>
    <div class="scroll-item">5</div>
    <div class="scroll-item">6</div>
    <div class="scroll-item">7</div>
    <div class="scroll-item">8</div>
    <div class="scroll-item">9</div>
  </div>
</body>
</html>

.scroll-container: Displays a grid of items using both horizontal and vertical snapping (scroll-snap-type: both mandatory).
.scroll-item: Each item snaps into place at the start of its respective scroll direction (scroll-snap-align: start).

This type of example is useful when creating scrollable maps or grids where content can be navigated in both axes.

Output

Summary

So, in this article, we learn about CSS Scroll Snaps, an efficient and flexible tool for creating controlled scrolling experiences. Allowing developers to define snap points greatly improves the usability and smoothness of web interfaces, particularly on touch devices. 

If you find this article valuable, please consider liking it and sharing your thoughts in the comments.

Thank you, and happy coding.


Similar Articles