Web Technology Demo

CSS Scroll Snap

Scroll Snap is a feature in CSS that allows you to style a scrolling container to "snap" to certain points, providing a better experience for mobile users by allowing them to view the entirety of the content of a scrollable container without having to scroll precisely to the beginning of each item.

Design engineer Ahmad Shadeed posted about CSS Scroll Snap on December 8, 2020. His tutorial can be found at his website ishadeed.com.

I find this concept interesting because it allows more user-friendly styling of scrollable containers without the use of JavaScript. It is easy to implement, very intuitive, and is a great option for displaying image galleries, user profiles, and other page elements that you would normally find in a scrolling container.

Demonstration

Here is a scrollable container without scroll snap, and the HTML and CSS used to style it:

Item 1
Item 2
Item 3
Item 4
Item 5
<div class="no-snap">
    <div class="no-snap-item">Item 1</div>
    <div class="no-snap-item">Item 2</div>
    <div class="no-snap-item">Item 3</div>
    <div class="no-snap-item">Item 4</div>
    <div class="no-snap-item">Item 5</div>
</div>
.no-snap {
    display: flex;
    gap: 10px;
    background-color: var.$color-page;
    white-space: nowrap;
    max-width: 750px;
    overflow-x: auto;
    padding: 1rem;
    margin: 10px auto;
    border-radius: 10px;

    .no-snap-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 300px;
        width: 30px;
        height: 150px;
        background: white;
        color: black;
        border-radius: 10px;
    }
}

This container does not offer a user-friendly experience, as scrolling through the items it contains requires the user to scroll exactly to the beginning of each item. With scroll snap, however, the items will always align to a specified position. Here is another scrollable container with scroll snap applied:

Item 1
Item 2
Item 3
Item 4
Item 5

Now, the items snap to the start of the container when scrolled through. Below are the new style rules used for this container:

.snap {
    scroll-snap-type: x mandatory;
    scroll-padding: 1rem;

    .snap-item {
        scroll-snap-align: start;
    }
}

scroll-snap-type: x mandatory applies scroll snap and defines how strictly it is applied; in this case, it is applied to the x axis and must snap to the start of the scrolling container. Without the specification of mandatory, the default is proximity, allowing the browser to handle the work of determining where to snap the scroll items to.

Additionally, you can specify the items to snap to the start, center, or end of the scroll container using scroll-snap-align. Below is a container set to align to center:

Item 1
Item 2
Item 3
Item 4
Item 5
.snap-item {
    scroll-snap-align: start;
}

.center {
    scroll-snap-align: center;
}

Now, the items stop at the center of the scrolling container. Here is an image gallery utilizing CSS Scroll Snap that displays a scrolling list of images. Scroll Snap ensures that each image will snap to the center of the container and be shown in its entirety when a user scrolls through:

Mountain bike in front of the sunset Blue bicycle in front of a white wall White bicycle in front of a blue wall Brown bicycle in front of a yellow wall Yellow mountain bike loaded up with gear, overlooking a scenic landscape

For more examples of how to use scroll snap, along with use cases, view Shadeed's tutorial page here!

← Back to W.E.T.