Snappy Scroll with CSS Scroll Snap

CSS Scroll Snap was introduced to allow you to define snap points for scrollable elements. It ensures that the scrolling lands precisely at the desired points.

This new CSS feature is especially useful for creating carousels, slideshows, or any layout where you want to control the user’s scrolling experience. Let’s see how it works.

New Properties

The CSS Scroll Snap module introduces two main new properties to give us more control of the scrolling behavior:

• scroll-snap-type: This property is applied to the container element to define the snapping behavior. It can be set to x, y, or both to specify the axis of snapping. It also takes a second argument which can be set to mandatory or proximity. The mandatory value forces the scroll to snap to the nearest snap point, while proximity allows the scroll to stop at any point within the snap area.
• scroll-snap-align: This property is applied to the scrollable elements within the container to define the snap points. It can be set to start, center, or end to specify where the element should snap to the container. It can also be set to none to disable snapping for a specific element.

Creating Carousel

First, let’s say we want to create a horizontal carousel of images. We want each image to slide and immediately snap into place as we scroll it. First, we place the HTML, as follows:

<div class="carousel">
    <div class="slide">
        <img src="/image-1.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-2.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-3.jpg" width="600" height="400" />
    </div>
    <div class="slide">
        <img src="/image-4.jpg" width="600" height="400" />
    </div>
</div>

As well as the styles.

.carousel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.image {
    flex: 0 0 100%;
    scroll-snap-align: center;
    
    /* Stylistic elements */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: #dddddd;
}

In this example, we set the scroll-snap-type property to x mandatory on the .carousel container, indicating that the scroll snapping should happen horizontally and be mandatory. We also set the scroll-snap-align property to center on the .image elements, meaning each image will snap to the center of the container as you scroll.

See the Pen Scroll Snap by HONGKIAT (@hkdc)on CodePen.

To make it scroll vertically, we can simply set the scroll-snap-type value to y, and change the direction of our Flex layout so each element would stack vertically.

.carousel {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100vh;
    scroll-snap-type: y mandatory;
}

/* ...Remaining code... */

Now, let’s scroll vertically.

See the Pen Scroll Snap (Vertical) by HONGKIAT (@hkdc) on CodePen.

Browser Support

Wrapping up

CSS Scroll Snap is a powerful tool for creating smooth and controlled scrolling experiences. Whether you’re building a carousel, a slideshow, or any scrollable layout, you can now create the perfect scrolling effect without any JavaScript added.

In this article, we’ve only touched the very basic implementations. There are a lot more creative ways we can leverage CSS Scroll Snap. Here are some of them for your inspiration.

CSS-only Carousel

Our carousel created in this article is pretty basic. The following demo shows how you can add controls like buttons and pagination into the carousel, all without any JavaScript involved.

See the Pen A CSS-only Carousel Slider by Christian Schaefer (@Schepp)on CodePen.

Animated Verbs

Similar to what we created here, but with more vibrant colors, added with animated text.

See the Pen Animated Verbs by Ryan Mulligan (@hexagoncircle)on CodePen.

Digital Walls

Creative use of grid layouts combined with CSS Scroll Snap on each column.

See the Pen Modern Blog Layout with CSS Grid by Aysenur Turk (@TurkAysenur)
on CodePen.

The post Snappy Scroll with CSS Scroll Snap appeared first on Hongkiat.