Unlocking CSS Scroll Snaps For Intuitive Web Navigation
Published: 2024-01-13 12:13:46

by [Ollie Baker](https://blog.openreplay.com/authors/ollie-baker)


<blockquote><em>
Have you ever wondered what makes for a beautiful web experience beyond accessible designs, unique color palettes, and captivating visuals? It is no other than a smooth navigation. Stepping into the world of web design, no feature gives users quite an impeccable web experience better than seamless navigation. From its ability to streamline interaction to reducing web frustration, creating easily navigable websites has become a trendy addition to the modern web. This article will show you how to unlock CSS Scroll Snaps to produce better UX.
</em></blockquote>


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

While most web developers find it daunting to create easily navigable websites, we hope to make this task less intimidating by delving into the world of CSS `scroll snaps` and utilizing them for intuitive web navigations.

By the end of this tutorial, you can apply your knowledge of scroll snaps to create web pages that scroll seamlessly, just like the image carousel showcased below.

![ezgif.com-optimize (2)](https://blog.openreplay.com/images/css-scroll-snaps-for-web-navigation/images/image1.gif)

The video above introduces the concept of `scroll snaps` applied to an image carousel. On observation, you will notice how scrolling stops at precise intervals, offering smooth and controlled movement through the carousel.

## What is scroll snap?

`Scroll snap` is the CSS feature that gives developers the leverage to control the positioning of scroll containers. When web users scroll through a web page, the page stops at the point where the user stops scrolling. However, by utilizing the CSS `scroll snap` feature, the webpage stops at specific points within the container specified by the developer. These points are known as snap points, and their primary function is serving as positions within a scroll container that ensures scrolling aligns within designated locations. By utilizing `scroll snap` in websites, web developers can associate each element within a scroll container to specific snap points, ensuring scrolling ends at these positions.

Two properties are associated with controlling the scrolling behavior of a website. They are the `scroll-snap-type` and the `scroll-snap-align` properties.

### Scroll-snap-type property

`Scroll-snap-type` is the CSS property usually specified within the webpage's parent or container element and which defines the page's scrolling behavior. This property comes with a syntax that holds two values—the first, which represents the direction of the scroll, and the second, which defines its behavior.

### Syntax

```css
.container {
  scroll-snap-type: x/y/both none/mandatory/proximity;
}
```

### Scroll direction

The scroll direction defines what direction the `scroll-snap-type` property should be applied to. It holds three possible values, which are:

* The `X` value: This value applies `scroll-snap-type` property to the horizontal direction.

* The `Y` value: This value applies `scroll-snap-type` property to the vertical direction.

* The `Both` value: This value applies the `scroll-snap-type` property to horizontal and vertical directions.

Other possible scroll direction values include:

* `Inline` value: Applies `scroll-snap-type` property to the `inline` direction.

* `Block` value: Applies `scroll-snap-type` property to the block direction.

### Scroll behavior

The scroll behavior defines the type of `scroll-snap` that should be applied to a webpage. Similar to the scroll direction, scroll behavior also holds three values. They are:

* `None` value: This is the default value of the `scroll-snap-type` property, specifying that no scroll behavior should be applied on a webpage.

* `Mandatory` value: The `mandatory` value ensures that elements are automatically taken to scroll points irrespective of the user's scroll position. It is a very strict `scroll-snap-type` property value.

* `Proximity` value: The `proximity` value carries similar functions as the `mandatory` value. However, it is a less strict `scroll-snap-type` property value.

## Scroll-snap-align property

The `scroll-snap-align` is the CSS property applied to the child/children element within the scroll container and determines how each item aligns within specific snap points. It determines where each container element snaps into focus when scrolling stops.

### Syntax

```css
.panel {
  scroll-snap-align: none/start/center/end;
}
```

This property holds four possible values, and they are:

* `None` value: This is the default value of the `scroll-snap-align` property, specifying that no `scroll-snap` effect be applied to the element(s).

* `Start` value: This value applies the `scroll snap` effect at the element's start for horizontal and vertical scrolls.

* `Center` value: This value applies the `scroll snap` effect at the element's center.

* `End`: This value applies the `scroll snap` effect at the element's end for horizontal and vertical scrolls.

## Creating horizontal and vertical snap points

In our exploration of `scroll snaps`, we've covered their basic properties: `scroll-snap-type` and `scroll-snap-align`. Moving forward, we will translate this knowledge into practical horizontal and vertical scrolling applications while integrating them into `flexbox` layouts and `grid` containers. Throughout this process, we'll tailor our HTML and CSS files to create an engaging product showcase.

## General HTML markup

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="panel">
        <img src="./im/pexels-terrance-barksdale-10112911.jpg" alt="" />
      </div>

      <div class="panel">
        <img src="./im/icee-dc-PvObYzFkTAE-unsplash.jpg" alt="" />
      </div>

      <div class="panel">
        <img src="./im/pexels-grailify-8871471.jpg" alt="" />
      </div>

      <div class="panel">
        <img src="./im/chris-henry-tV8yaU09t7w-unsplash.jpg" />
      </div>

      <div class="panel">
        <img src="./im/pexels-jonathan-garcìa-8490975.jpg" alt="" />
      </div>
    </div>
  </body>
</html>
```

Our  HTML markup holds six `div tags`. The first is the `div tag` with the class `“container”`. This `div tag` serves as the parent element, and it holds the remaining `div tags`: `<div class= "panel"></div>` which are its children elements.

### Result

![ezgif.com-optimize (4)](https://blog.openreplay.com/images/css-scroll-snaps-for-web-navigation/images/image2.gif)

The above video illustrates the behavior of a webpage without `scroll snap` applied. Note how each panel stops without snapping when scrolling comes to a halt.

Having set up our HTML markup, it's time to move to our CSS file.

## CSS markup for horizontal scroll

We will set our horizontal scroll within a `grid` container for our CSS markup. We do this by setting the display of our parent element to `grid`. Below is the code.

```css
/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*sets the background color of the entire webpage to black*/
body {
  background: black;
}

/*sets the display of the parent element to grid and sets the scroll-snap-type to x mandatory,
lays the elements of the container over a background image,
sets the margin of the container to auto, thereby placing container element at the center of the webpage*/
.container {
  background: url(./im/pexels-terrance-barksdale-10112911.jpg);
  display: grid;
  grid-template-columns: repeat(5, 100%);
  width: 90vw;
  height: 90vh;
  overflow-x: scroll;
  margin: auto;
  margin-top: 40px;
  scroll-snap-type: x mandatory;
}

/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

/*gives each image a width and height of 100%*/
.panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
```

In our above code, we set the style of the entire webpage using the `*` syntax. We set the `margin` and `padding` to zero and the `box-sizing` property to `border box`. The essence of `box-sizing` is to ensure elements do not take up extra space when `padding` is set on them. We move forward by setting the `background color` of the webpage to black. 

To implement our `scroll snap` feature, we apply style to our `"container"` element, setting its display to `grid`. We give the container width and height of `90vw` and `90vh`, respectively. This is to prevent our container element from filling up the entire screen. To place our container element at the center of the page, we set its `margin` to `auto` and its `margin-top` to `40px`.

For our children's element, we set their `width` and `height` to `100%` and `100vh`, respectively. Also included is our `scroll-snap-align` property set to `start`. This implements scroll-snapping.

Note each image carries a `width` and `height` of `100%` each, and the `object-fit` property is set to `contain.`

Also note the use of the `overflow-x` property holding a value of `scroll` and the `scroll-snap-type` property holding a value of `x`. Both properties implement seamless horizontal scrolling.

### Result

![ezgif.com-optimize (6)](https://blog.openreplay.com/images/css-scroll-snaps-for-web-navigation/images/image3.gif)

In the video above, we showcased the application of horizontal `scroll snaps` in a product showcase. Each product is presented within its panel, and the horizontal `scroll snap` seamlessly guides users through diverse offerings.

<CTA_Middle_Design />



## CSS markup for vertical scroll

We will set our vertical scroll within a `flex` container for our CSS markup. We do this by adding a `flex` display to our parent element and setting the `flex property` of our children's elements to `none.` Below is the code.

```css
/*sets the style for the entire webpage, giving the page zero margin and padding*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*sets the background of the entire webpage*/
body {
  background: url(./im/pexels-terrance-barksdale-10112911.jpg);
}

/*sets the display of the parent element to flex and sets the scroll-snap-type to y mandatory*/
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

/*gives each child element a width of 100% and height of 100vh, while setting the scroll-snap-align property to start*/
.panel {
  flex: none;
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

/*gives each image a width of 100% and height of 90%*/
.panel img {
  margin-top: 40px;
  width: 100%;
  height: 90%;
  object-fit: contain;
}
```

Similar to our horizontal scroll, we set the style of the entire webpage for our vertical scroll using the `*` syntax. We set the `margin` and `padding` to zero and the `box-sizing` property to `border box`.

We go further, implementing the `scroll snap` feature on our webpage by applying style to our `"container"` element, setting its display to `flex`. We give the container a width and height of `100%` and `100vh` respectively. We also set our `overflow-y` property to `scroll`. This feature enables vertical scrolling. To implement scroll-snapping, we set the `scroll-snap-type` to `y mandatory`.

For our children's element, we set their width and height to 100% and 100vh, respectively. Also included is our `scroll-snap-align` property set to `start`.

Note each image carrying a `width` and `height` of `100%` and `90%` respectively, and the `object-fit` property set to `contain`.

### Result

![ezgif.com-optimize (7)](https://blog.openreplay.com/images/css-scroll-snaps-for-web-navigation/images/image4.gif)

In the above video, we utilized vertical `scroll snaps` within a product showcase. Each item in the catalog is aligned in a vertical sequence and distinctly represented within its vertical panel. The vertical `scroll snap` creates a guided navigation experience, giving users the leverage to smoothly scroll through the product lineup in a controlled manner.

## Advanced scroll snap techniques

So far, we have set up horizontal and vertical scrolling within our `flexbox` layout and `grid` container, ensuring a smooth scrolling experience. However, we could take a step further by adding specific properties to help fine-tune our scroll behavior, enhancing users' web experience. These properties are the `scroll-padding` and `scroll-margin`.

### Scroll-padding property

The `scroll-padding` property is the feature that allows the control of spacing within a scroll container. This implies that when a user scrolls through a page, and the motion comes to a halt, the page quickly adjusts, stopping at a specified distance from the container to the snap position of the child element in focus.

### Syntax

```css
.container {
  scroll-padding: 50px;
}
```

`Scroll-padding` has a similar syntax as the regular `padding` property, and it is the shorthand for four other properties, which are:

* `Scroll-padding-top`: This property controls spacing at the top of the scroll container.

* `Scroll-padding-bottom`: This property controls spacing at the bottom of the scroll container.

* `Scroll-padding-left`: This property controls spacing at the left of the scroll container.

* `Scroll-padding-right`: This property controls spacing at the right of the scroll container.

To effectively implement scroll-padding, the `scroll-snap-align` property must be set on the child element, while the `scroll-padding` and `scroll-snap-type` properties must be placed on the parent element.

### Scroll-margin property

The `scroll-margin` property is the feature that controls the space within snap positions and scroll container edges. This implies that once scrolling is halted, the scrolling adjusts and stops at a specified distance between the snap position and the container.

### Syntax

```css
.panel {
  scroll-margin: 50px;
}
```

`Scroll-margin` property is the shorthand property for four other values. They are:

* `Scroll-margin-top`: Sets the margin between the snap position and the top of the scroll container.

* `Scroll-margin-bottom`: Sets the margin between the snap position and the bottom of the scroll container.

* `Scroll-margin-left`: Sets the margin between the snap position and the left of the scroll container.

* `Scroll-margin-right`: Sets the margin between the snap position and the right of the scroll container.

To effectively apply the `scroll-margin` property, the `scroll-margin` and `scroll-align` properties must be set on the child element, while the `scroll-snap-type` property must be on the parent element.

## Real-world application of CSS scroll snap

So far, there's no doubt that CSS `scroll snap` stands out as a powerful and indispensable feature for every modern website as it improves user experience by providing a smooth and controlled scrolling behavior. Below, we delve into some real-world applications of CSS `scroll snaps`.

* **Image galleries and carousels:** Image galleries and carousels utilize CSS `scroll snaps` to provide a smooth and visually appealing browsing experience. When users scroll through image collections, with this feature's help, each image aligns with the viewport, creating a seamless transition. This further ensures that users focus on individual images rather than being distracted by partial views.

* **Responsive web designs:** Yet another excellent application of CSS `scroll snaps` is in creating responsive web designs. When users navigate a website, `scroll snaps` ensure that sections are neatly snapped into view, aligning with the viewport. This guarantees a consistent and visually pleasing layout whether on a Smartphone, tablet, or desktop.

* **Interactive maps:** In the case of interactive maps, the CSS `scroll snap` feature brings them alive, guiding users on a virtual journey through several locations. When users navigate the map, the feature enables the map to transition smoothly to points of interest, providing a unique exploration experience.

* **Product showcases:** E-commerce websites leverage the power of the `scroll snap` to showcase their products in well-organized formats. As users scroll through product catalogs, each item aligns perfectly with the viewport, giving customers the much-needed ability to focus on individual products while avoiding distractions.

## Conclusion

CSS `scroll snaps` offer a promising approach to creating seamlessly navigable websites. By defining snap points, developers can improve user experience, making scrolling smoother and less frustrating. Whether applied to creating image galleries or interactive maps, the CSS `scroll snap` feature seamlessly improves user navigation, thereby creating a more immersive and well-polished web experience.