Mastering CSS scroll-snap-align for Smooth Scrolling

Discover how to use the CSS scroll-snap-align property to create smooth and controlled scrolling experiences.

Options include none, start, end, and center.

Enhance your web design with precise alignment and navigation.

Introduction

In web development, the scroll-snap-align property in CSS helps create smooth and controlled scrolling. It aligns elements perfectly within their scroll container, enhancing user interactions. This feature works well across many browsers and devices, making it a reliable choice for web developers.

Baseline Widely Available

The scroll-snap-align property has been available in browsers since July 2019, ensuring compatibility with a wide range of web development environments.

Description of scroll-snap-align

The scroll-snap-align property defines where an element should snap within its scroll container. It’s great for creating carousels, image galleries, or any scrollable section where precise alignment is needed. This property ensures that the most important parts of your content are in view, improving both visual appeal and usability.

Syntax and Values

The scroll-snap-align property can take one or two keyword values. If one value is given, it applies to both the block and inline axes. If two values are given, the first value controls the block axis, and the second value controls the inline axis.

Here’s the syntax:

/* Single keyword value */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;

/* Two keyword values */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

Values

none: No snap position.
start: Snaps to the start of the scroll container.
end: Snaps to the end of the scroll container.
center: Snaps to the center of the scroll container.

Formal Definition

Initial value	`none`
Applies to	All elements
Inherited	No
Computed value	As specified
Animation type	Discrete

Formal Syntax

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

Specifications

The scroll-snap-align property is defined in the CSS Scroll Snap Module Level 1.

Browser Compatibility

The scroll-snap-align property is supported in the following browsers:

Chrome: 69 and above
Firefox: 68 and above
Safari: 11 and above
Edge: 79 and above
Opera: 56 and above

Examples

Here’s an example to illustrate how the scroll-snap-align property works:

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 255px;
            height: 300px;
            border: 4px solid greenyellow;
            scroll-snap-align: none start;
        }

        .Container {
            width: 300px;
            height: 300px;
            border: 5px solid red;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            scroll-snap-stop: always;
        }
    </style>
</head>
<body>
    <div class="Container">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
    </div>
</body>
</html>