CSS scroll-snap: Enhancing User Experience with Smooth Scrolling

First, Let’s create a parent scroll container <ul> , then add in 3 <li> elements as individual slides, for example:

<ul class="container">
   <li style="background: aqua;">Slide 1</li>
   <li style="background: aquamarine;">Slide 2</li>
   <li style="background: cadetblue;">Slide 3</li>
</ul>

Next, we now can add CSS styles to customize the appearance and behavior of the scroll container, for example:

.container{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 300px;
    height: 300px;
}
li{
    scroll-snap-align: start;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    list-style: none;
}

By setting up scroll-snap-type: y mandatory;, the content inside the scroll container .container will smoothly align and snap to predetermined positions as you scroll up or down vertically.

In this case, we will also utilize the scroll-snap-align: start; property to ensure that each item within the container aligns itself with the starting point of the scroll container.

Congratulations! You have already completed the basic sample of the scroll-snap tutorial. If you are interested to explore more available options for snapping behavior, you can refer to the next section for available options about scroll-snap-type values. Happy coding!