Open In App
Related Articles

CSS scroll-snap-align property

Improve Article
Save Article
Like Article

CSS scroll-snap-align property represents the snap position of a box’s snap area within the element’s or container’s snap port.


scroll-snap-align: Keyword_Values;
/* Or */
scroll-snap-align: Global_Values;

Property values: The scroll-snap-align property accepts two values mentioned above and described below:

  • keyword_Values: This property refers to the keyword values like none, start, end, center, etc.
  • Global_Values: This property refers to the global values like inherit, initial, unset, etc.

Note: When two property value is set, then the first one is for block and the second one is for inline. Ex.  scroll-snap-align: start end;

Example 1: In this example, you can see the effect of scroll-snap-align by scrolling to a point partway between two of the “interfaces” of the example’s content. Here we have used none start as the property value. 


<!DOCTYPE html>
        .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;
    <div class="Container">
        <img src=
        <img src=
        <img src=
        <img src=


Browsers Supported:

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 08 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials