In my code, the scrolling gets stuck at the anchors, I need to keep scrolling down once the anchor is reached. Also before reaching the 10vh range of the anchor I want to be able to scroll to the opposite direction, however in this code when I scroll to the opposite direction before reaching 10vh close to the anchor which locks the scrolling, I still can't scroll. Here is my code: "<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Scrolling Anchors</title>
    <style>
        .scroll-section {
            height: 100vh;
            overflow-y: scroll;
        }

        .scrolling-anchor {
            height: 100vh;
            position: relative;
        }

        .scrolling-anchor::before {
            content: “”;
            position: absolute;
            top: -10vh;
            left: 0;
            width: 100%;
            height: 10vh;
            background-color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class=“scroll-section”>
        <div class=“scrolling-anchor” style=“background-color: lightblue;”></div>
        <div class=“scrolling-anchor” style=“background-color: lightgreen;”></div>
        <div class=“scrolling-anchor” style=“background-color: lightyellow;”></div>
    </div>

    <script>
        const section = document.querySelector(“.scroll-section”);
        const anchors = document.querySelectorAll(“.scrolling-anchor”);
        let scrolling = false;
        let lastDirection = 0;

        section.addEventListener(
            “wheel”,
            (event) => {
                if (scrolling) return;

                event.preventDefault();

                const direction = event.deltaY > 0 ? 1 : -1;

                if (lastDirection !== 0 && lastDirection !== direction) {
                    scrolling = false;
                    return;
                }

                lastDirection = direction;

                const scrollOffset =
                    document.documentElement.scrollTop || document.body.scrollTop;
                const windowHeight = window.innerHeight;

                let nextAnchor = null;
                let nextAnchorOffset = null;

                anchors.forEach((anchor) => {
                    const anchorOffset = anchor.offsetTop;
                    if (
                        (direction > 0 && anchorOffset > scrollOffset) ||
                        (direction < 0 && anchorOffset < scrollOffset)
                    ) {
                        if (
                            nextAnchor === null ||
                            Math.abs(anchorOffset - scrollOffset) <
                                Math.abs(nextAnchorOffset - scrollOffset)
                        ) {
                            nextAnchor = anchor;
                            nextAnchorOffset = anchorOffset;
                        }
                    }
                });

                if (nextAnchor === null) return;

                const distanceToAnchor = Math.abs(nextAnchorOffset - scrollOffset);
                const scrollLockDistance = 10; // vh
                const scrollLockPixels = (windowHeight * scrollLockDistance) / 100;

                if (distanceToAnchor <= scrollLockPixels) {
                    scrollToAnchor(nextAnchorOffset, 500);
                } else {
                    const freeScrollPixels = distanceToAnchor - scrollLockPixels;
                    const freeScrollDirection = direction > 0 ? 1 : -1;
                    const newScrollOffset =
                        scrollOffset + freeScrollDirection * freeScrollPixels;
                    scrollToAnchor(newScrollOffset, 500, () => {
                        scrollToAnchor(nextAnchorOffset, 500);
                    });
                }
            },
            { passive: false }
        );

        function scrollToAnchor(offset, duration, callback) {
            scrolling = true;
            const start = window.pageYOffset;
            const distance = offset - start;
            let startTime = null;

            function animate(currentTime) {
                if (startTime === null) startTime = currentTime;
                const elapsedTime = currentTime - startTime;
                const scrollPosition = easeOut(
                    elapsedTime,
                    start,
                    distance,
                    duration
                );
                window.scrollTo({ top: scrollPosition, behavior: “smooth” });
                if (elapsedTime < duration) {
                    requestAnimationFrame(animate);
                } else {
                    scrolling = false;
                    lastDirection = 0;
                    if (callback) callback();
                }
            }

            requestAnimationFrame(animate);
        }

        function easeOut(t, b, c, d) {
            t /= d;
            return -c * t * (t - 2) + b;
        }
    </script>
</body>
</html>"