CSS scroll-snap-align property

Last Updated : 25 Jul, 2024

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

Syntax:

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.

html

<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png" 
             class="geeks">

        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" 
             class="geeks">

    </div>
</body>

</html>