Scroll snapping

The scroll-snap-align property is part of the CSS Scroll Snap Module. This property specifies the box's snap position as an alignment of its snap area within its snap container's scrollport. The two values specify the snapping alignment in the block axis and inline axis, respectively. If you specify only one value, the second value defaults to the same value.

Here is the syntax of the scroll-snap-align property:

scroll-snap-align: [ none | start | end | center ]{1,2}

When you use the scroll-snap-align property, you can work with several values:

• none — the snap position is not defined.

• start — starts at the beginning of the x and y-axis of the container.

• end — starts at the end of the x and y-axis of the container.

• center — set to the center of the container of the x and y-axis.

To understand this better, let's put the values next to each other so we can see the difference:

scroll-snap-type

The scroll-snap-type property is part of the CSS Scroll Snap Module. This property sets the scrolling of the snap points on the scroll container. In other words, it "locks" the position of the viewport to specific elements on the page while the window is scrolled.

This property can be useful in many situations. For example, let's say you are scrolling through a photo gallery. While scrolling, you don't want to stop at 2/3 of the picture: you want to see the whole picture. To prevent that, you can use the scroll-snap-type property. Think of it like a magnet at the beginning of the picture. Every time you scroll, it will start from the beginning of the picture. In other words, this property stops the browser at specific points on the page.

Down below you can see the syntax of the scroll-snap-type property:

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

Here is a list of values used along with the property scroll-snap-type:

• none ignores the snap points when the visual viewport of this scroll container is scrolled.

• x — the scroll container snaps to snap positions in its horizontal axis only.

• y — the scroll container snaps to snap positions in its vertical axis only.

• block — the scroll container snaps to snap positions in its block axis only.

• inline — the scroll container snaps to snap positions in its inline axis only.

• both — the scroll-snap effect is set on both the x and y-axis.

• mandatory — scroll automatically moves to a snap point after the finished scroll action.

• proximity — similar to mandatory, but in between snap points, there is an area without the snap effect (depending on the browser).

These values are great for combining. So, to demonstrate the usage of these values, we will combine some of them. We will split them up in order for you to better understand them.

First, let's combine values x ,y and both with mandatory. Think of the mandatory value as your way of telling the container that it must scroll in the way you set it. In the first picture, we applied this property to the container:

scroll-snap-type: x mandatory;

As you can see from the output, this container must scroll on the x coordinate because it is set to mandatory:

The second picture shows these values combined:

scroll-snap-type: y mandatory;

In this case, scrolling is mandatory on the y coordinate:

And, if we want to apply scrolling to both of the coordinates, we will combine these values:

scroll-snap-type: both mandatory;

The code output:

Now that we covered this combination, in the next part we will combine values x, y, and both with proximity. The proximity value literally makes an approximation. When you scroll a good part of the container, it will spontaneously finish the scrolling for you. To understand this better, let's see some examples.

First, we will combine values x and proximity:

scroll-snap-type: x proximity;

As you can see in the picture, the majority of the container is passed, and this property will snap the container to the end:

Combining y and proximity will do the same thing but on the y-axis:

scroll-snap-type: y proximity;

The code output:

You can also make scroll on the x and y-axis using both and proximity:

scroll-snap-type: both proximity;

The code output:

scroll-snap-stop

The scroll-snap-stop property is part of the CSS Scroll Snap Module. This property tells whether or not the scroll container is allowed to "pass over" possible snap positions. It allows you to force the scroll-snapping container to snap to a particular element. With this property, you make the browser stop on a particular element before allowing the user to pass it.

Here is the syntax of the scroll-snap-stop property:

scroll-snap-stop: normal | always;

And here is a list of values used along with scroll-snap-stop:

• normal is the default value. The scrolling goes slowly and passes a few elements.

• always — after a fast swipe, the scrolling stops and the next element snaps into focus.

• initial sets the property to its default value.

• inherit inherits this property from the parent element.

To understand this better, let's put the values next to each other so that we can see the difference:

Conclusion

In this topic, you learned about the scroll-snap property. This property allows you to manipulate the scrolling behavior of the browser window. We covered three most important properties:

• scroll-snap-align,

• scroll-snap-type,

• scroll-snap-stop.

Now that we went through the theory and examples of these properties, let's move on to practice!