Skip to content
Related Articles

Related Articles

CSS scroll-snap-align property

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Sep, 2020

CSS scroll-snap-align property represents the snap position of a box’s snap area within 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.
  • Firefox.
  • Safari.
  • Edge.
  • Opera.
  • Internet Explorer (Not Supported).

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!