I want to scroll 100vh in a web page. I want it to be as if a slide show. However if user scrolls twice in middle of scrolling the scroll will not be aligned and will get scrolled to unwanted location. Help me implement a thing for this so the scrolling will only, and always, stop at an element. Here is my code: "<script>
    // Listen for the "wheel" event on the document and prevent the default behavior
    const section = document.querySelector(".scroll-section");
    section.addEventListener(
        "wheel",
        (event) => {
            event.preventDefault();

            // Check if the target element is a scroll section
            const scrollSection = section;

            // Determine the direction of the scroll
            const direction = event.deltaY > 0 ? 1 : -1;

            // Calculate the distance to the next scroll position (100vh)
            // Calculate the distance to the next scroll position (100vh)
            const scrollOffset =
                document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const nextScrollPosition = scrollOffset + direction * windowHeight;

            // Animate the scrolling with requestAnimationFrame()
            const start = window.pageYOffset;
            const distance = nextScrollPosition - start;
            const duration = 1000; // 1 second
            let startTime = null;

            function animate(currentTime) {
                if (startTime === null) {
                    startTime = currentTime;
                }
                const elapsedTime = currentTime - startTime;
                const scrollPosition = easeInOut(
                    elapsedTime,
                    start,
                    distance,
                    duration
                );
                window.scrollTo({ top: scrollPosition, behavior: "smooth" });
                if (elapsedTime < duration) {
                    requestAnimationFrame(animate);
                }
            }

            requestAnimationFrame(animate);

            // Add a shake effect at the end of the scroll
            setTimeout(() => {
                scrollSection.classList.add("shake");
                setTimeout(() => {
                    scrollSection.classList.remove("shake");
                }, 500);
            }, 1500);

            // Easing function for smooth scrolling animation
            function easeInOut(t, b, c, d) {
                t /= d / 2;
                if (t < 1) return (c / 2) * t * t + b;
                t--;
                return (-c / 2) * (t * (t - 2) - 1) + b;
            }

            // Animate the scrolling with a delay
            // Determine the direction of the scroll

            // Calculate the distance to the next scroll position (100vh)
            const scrollTop = section.scrollTop;
            const scrollHeight = section.scrollHeight;
            const clientHeight = section.clientHeight;
            const scrollPosition =
                Math.round(
                    (scrollTop + direction * clientHeight) / clientHeight
                ) * clientHeight;
            // const distance = scrollPosition - scrollTop;

            // Animate the scrolling with a delay
        },
        { passive: false }
    );
</script>"