How do i build a vertical carousel scroller in pure javascript?

This is what I want to accomplish

The code is already here, but i do not know how to make it stop at each section. https://codepen.io/ellie_html/full/dyYjZyB

the part of the css that makes the code above work is this

.container {
    height:570px;
    width: 325px;
   
    overflow-y: scroll;

    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(3rem);
    scroll-snap-type: y mandatory;
    position: relative;
    left: 510px;
    top: 50px;
    z-index: 1;
    border-radius: 15px;
    border: none;
}

.tiktok {
    height: 620px;
    width:300px;
    background-color: black;
    scroll-snap-align: start;
}

A vertical carousel scroller just like above, except, it must stop on each section instead of allowing the use to quicky scroll over each section.

I notice google shorts https://www.youtube.com/shorts/3jqhfmUqgZk behave the same way if you scroll down.

Snappy and crisp to the feel. However it also doesnt allow it to stop on each section. If a user scrolls very fast, it will skip over many.

How can this be done in javascript? I have looked at many libraries so far but they all suffer from the same problem. I am trying to modify the code above to make it work.

Or am i recreating the wheel and there is some tiny code out there that already does this?

from How do i build a vertical carousel scroller in pure javascript?