Open In App

CSS scroll-snap-align property

Improve
Improve
Like Article
Like
Save
Share
Report

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=
             class="geeks">
 
        <img src=
             class="geeks">
 
        <img src=
             class="geeks">
 
        <img src=
             class="geeks">
 
    </div>
</body>
</html>


Output:

Browsers Supported:

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


Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads