CSS Scroll Snap

Written By: Avinash Malhotra

Updated on:

  1. Home
  2. Frontend
  3. CSS
  4. Scroll Snap
  1. scroll-snap-type
  2. scroll-y
  3. scroll-x
  4. scroll-snap-align

CSS Scroll Snap is a new feature used to control stopping point when scrolling ends. Its is really important to add Power Point Presentation like full page scrolling effects on x or y axis.

Scroll snap includes a container and some children elements. Some properties are applicable to parent container and some to children.

Scroll Snap Example

Scroll Y (top to bottom)

Element 1
Element 2
Element 3

Scroll X (left to right)

Element 1
Element 2
Element 3

Scroll Snap Type

CSS Scroll Snap Type is compulsory property for parent container.

CSS Scroll Snap Type has two values, first is snap-axis and second is snap strictness.

Snap Axis

Snap Axis can be x, y or both. x axis is for left to right or right to left scroll. Snap axis is also compulsory to defined.

Snap Strictness

Snap Strictness can have values like proximity or mandatory. The default value is proximity. proximity will scroll to nearby element, but mandatory will always scroll to next or previous element based on scrolling direction.

mandatory is recommended in most of the cases as proximity cause usability issues. Also proximity is not fully supported on touch devices.

Scroll Snap Values

  1. none
  2. x mandatory
  3. y mandatory
  4. x proximity
  5. y proximity
  6. both mandatory
  7. both proximity

Scroll y (top to bottom)

In the given example the scroll snap type is y proximity. We need to scroll from top to bottom or from bottom to top. proximity will scroll to nearby element, either previous or next based on scroll behavior.

Scroll Y proximity

Child 1
Child 2
Child 3


<style>
    .parent{
        height:300px;
        overflow:auto;
        scroll-snap-type: y proximity;
    }
    .child{
        height:300px;
        border:1px solid #000;
        scroll-snap-align:start;
    }
</style>

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>

Scroll Y mandatory

Child 1
Child 2
Child 3


<style>
    .parent{
        height:300px;
        overflow:auto;
        scroll-snap-type: y mandatory;
    }
    .child{
        height:300px;
        border:1px solid #000;
        scroll-snap-align:start;
    }
</style>

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>

Scroll x (left to right)

In the given example the scroll snap type is x proximity. We need to scroll from left to right or from right to left. proximity will scroll to nearby element, either previous or next based on scroll behavior.

x proximity

Child 1
Child 2
Child 3


<style>
.parent{
    height:300px;
    width: 1000px;
    display: flex;
    overflow:auto;
    scroll-snap-type: x proximity;
}
.child{
    height:300px;
    flex: 1 0 1000px;
    border:1px solid #000;
    scroll-snap-align:start;
}
</style>    

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>

x mandatory

Child 1
Child 2
Child 3


<style>
.parent{
height:300px;
width: 1000px;
display: flex;
overflow:auto;
scroll-snap-type: x mandatory;
}
.child{
height:300px;
flex: 1 0 1000px;
border:1px solid #000;
scroll-snap-align:start;
}
</style>    

<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>

Scroll Snap Align

Scroll Snap Align is property of child element used to align element to start, end or center when scroll ends.

Scroll Snap Align values

  1. start (default)
  2. center
  3. ends

Scroll Snap Align Example

Child 1
Child 2
Child 3
Child 4