Stop user from scrolling more than 1 element at once

Question

The problem

Basically I have a mobile website that has some videos. Each video takes 100% width and 100% height. I'm trying to make a scroll snap type feed, where the user can scroll only 1 video at a time and if they reach a certain point on the page while scrolling, it will snap to the next video. It's kinda like tiktok's video feed or instagram reels as an idea.

I'm using the scroll-snap package which kinda gets my half way to what I'm trying to achieve. It snaps when scrolling slowly, however if I was on mobile, I can just scroll really fast and allow the scroll momentum to skip videos. I'm trying to make it so the user is only able to scroll 1 video at a time no matter how hard they scroll.

Here is what's happening: https://streamable.com/f98slq. As you can see, I'm able to scroll past more than 1 video at a time.

What I've tried

I tried to get the scroll velocity when scrolling the feed. If it's higher than a certain value, I would apply a style that stops the page scroll for 10ms. This didn't really work though as the scroll momentum was able to scroll the page even if the scroll velocity wasn't high. I don't really like this solution though.

I'm not really sure the best way to approach this problem. Any feedback would be appreciated.

This is my code:

    // Scroll snap
    useEffect(() => {
        const { unbind } = createScrollSnap(MobileSnapContainer.current!, {
            snapDestinationX: '0%',
            snapDestinationY: '100%',
            timeout: 0,
            duration: 100,
            threshold: 0.1,
            snapStop: true,
        }, () => {})

        return () => unbind()
    }, [])

    return (
    <>        
        <InfiniteScroll
                dataLength={mobileVideos.length}
                next={loadMore}
                hasMore={hasMore}
                loader={null}
                scrollableTarget="container"
            >
                <div 
                    className="overflow-auto select-none hide-scrollbar" 
                    id="container" 
                    ref={MobileSnapContainer}
                >
                    {mobileVideos.map((data: video, index: number) => (
                        <SingleMobileVideo 
                          index={index}
                        />
                    ))}  
                </div>
            </InfiniteScroll>
      </>