Day # 37/100: Scroll snap

While doing some research for a previous project, I came across the CSS property of scroll-snap which allows us to scroll and go directly to the section we want.

This is something that was typically done with Javascript, but it is always a good practice to find the most effective way to achieve a certain effect. If you are able to find a solution by using CSS directly, then your work as a frontend developer will become immediately more effective.

The first rule to use this property is to have a container div holding a scroll-snap-type property set up like this:

.snap-container {

    height: 100vh;

    overflow: auto;  

    scroll-snap-type: y mandatory;  

  }

The second rule is to have the children elements to hold a scroll-snap-align property set like this:

.snap-section {

    scroll-snap-align: start;

    min-height: 60vh;

  }