rick@tillitsdone.com

+66824564755

Scroll to discover

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>

Help Improve MDN

Was this page helpful to you?

Learn how to contribute.

This page was last modified on Apr 18, 2024 by MDN contributors.

View this page on GitHub.

Report a problem with this content.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-scroll-margin-left.png

Understanding CSS scroll-margin-left for Smooth Scrolling Learn about CSS scroll-margin-left property for smooth scrolling. Discover its use cases and available options like length units and global values.

css_property_cover/css-property-animation.png

CSS Animation Enhance Web Design with Dynamic Effects Explore CSS animation to create dynamic and engaging web pages. Learn about key properties like duration, timing, and direction to enhance user experience.

css_property_cover/css-property-bottom.png

CSS Bottom Property A Comprehensive Guide The CSS bottom property controls the vertical positioning of elements. Use it with absolute, fixed, relative, or sticky positioning. Options include auto, length, percentage, inherit, and initial.

css_property_cover/css-property-inset-inline.png

CSS Inset-Inline Master Element Positioning Discover the CSS inset-inline property for precise control over element positioning in the inline direction. Learn about available options, practical examples, and browser compatibility.

css_property_cover/css-property-margin-bottom.png

CSS Margin-Bottom Mastering Space Control Learn about CSS margin-bottom, a crucial property for controlling the space below elements. Discover its use cases and available options, including length, percentage, and auto.

css_property_cover/css-property-overflow-x.png

CSS Overflow-x Managing Horizontal Overflow CSS overflow-x is a powerful tool for managing horizontal overflow in web designs. It offers options like visible, hidden, clip, scroll, and auto to control content visibility and scrolling.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

Mastering CSS scroll-snap-align for Smooth Scrolling

Introduction

Baseline Widely Available

Description of scroll-snap-align

Syntax and Values

Values

Formal Definition

Formal Syntax

Specifications

Browser Compatibility

Examples

See Also

Help Improve MDN

Talk with CEO