Skip to content
Related Articles

Related Articles

Improve Article

CSS scroll-snap-align property

  • 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.

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. 




<!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.
  • Firefox.
  • Safari.
  • Edge.
  • Opera.
  • Internet Explorer (Not Supported).



My Personal Notes arrow_drop_up
Recommended Articles
Page :