I am trying to convert my document scrolling animation code to, animation with in a div with a class .scroll-section with "overflow-y: scroll". However simply putting overflow-y: scroll to the css of .scroll-section breaks my code. I need to adjust all the calculation accordingly. Can you analyze my code and understand it, then convert it to a scrolling animation with in a div instead of animation in the whole document. 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>Smooth Scrolling</title>
        <style>
            .scroll-section {
                height: 100vh;
                
            }

            .scrolling-anchor {
                height: 100vh;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                scroll-snap-align: start;
            }

            .scrolling-anchor:not(:first-child)::before {
                content: "";
                position: absolute;
                top: -10vh;
                left: 0;
                width: 100%;
                height: 10vh;
                background-color: rgba(255, 0, 0, 0.5);
            }

            .last{
                height: 100vh;
            }
        </style>
    </head>
    <body>
        <div class="scroll-section">
            <section
                class="scrolling-anchor"
                style="background-color: lightblue"
            ></section>
            <section
                class="scrolling-anchor"
                style="background-color: lightgreen"
            ></section>
            <section
                class="scrolling-anchor"
                style="background-color: lightyellow"
            ></section>
        </div>
        <div class="last">
            
        </div>

        <script>
            let handlingScroll = false;
            function normalizeDelta(delta) {
                return Math.sign(delta);
            }

            const getAnchorInDirection = (delta) => {
                const anchors = document.querySelectorAll(".scrolling-anchor");
                const scrollOffset =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                const windowHeight = window.innerHeight;

                let nextAnchor = null;
                let nextAnchorOffset = null;
                let nextAnchorDistance = null;
                let anchorOffset = null;
                let signOfAnchor = null;
                anchors.forEach((anchor) => {
                    anchorOffset = anchor.offsetTop;
                    if (
                        (delta > 0 && anchorOffset > scrollOffset) ||
                        (delta < 0 && anchorOffset < scrollOffset)
                    ) {
                        if (
                            nextAnchor === null ||
                            Math.abs(anchorOffset - scrollOffset) <
                                Math.abs(
                                    nextAnchorOffset - scrollOffset
                                )
                        ) {
                            nextAnchor = anchor;
                            nextAnchorOffset = anchorOffset;
                        }
                    }
                });
                if(nextAnchor == null){
                    return false
                }
                return true
            }

            function onMouseWheel(event) {
                event.preventDefault();
                if (!scrolling == true && !handlingScroll == true) {
                    handlingScroll = true;
                    const normalizedDelta = normalizeDelta(event.deltaY);
                    console.log("Mouse event fire to: ", normalizedDelta);
                    if(!getAnchorInDirection(normalizedDelta)){
                         handlingScroll = false   
                        }else{
                            document.documentElement.scrollTop += normalizedDelta;
                        }
                    
                }
            }

            document.addEventListener("wheel", onMouseWheel, {
                passive: false,
            });

            // Handle keydown events
            const scrollKeys = [32, 33, 34, 35, 36, 37, 38, 39, 40, 107, 109];

            function onKeyDown(event) {
                console.log("son key basmalar");
                event.preventDefault();
                if (!scrolling == true && !handlingScroll == true) {
                    if (scrollKeys.includes(event.keyCode)) {
                        handlingScroll = true;
                        const deltaY =
                            event.keyCode === 38 ||
                            event.keyCode === 107 ||
                            event.keyCode === 36
                                ? -1
                                : 1;
                                if(!getAnchorInDirection(deltaY)){
                         handlingScroll = false   
                        }else{
                            document.documentElement.scrollTop += deltaY;
                        }
                        
                        console.log("son key basma scrolla yollama", deltaY);
                    }
                }
            }

            document.addEventListener("keydown", onKeyDown);

            function onTouchStart(event) {
                if (!scrolling == true && !handlingScroll == true) {
                    if (event.touches.length === 1) {
                        startY = event.touches[0].pageY;
                    }
                }
            }

            function onTouchMove(event) {
                event.preventDefault();
                if (!scrolling == true && !handlingScroll == true) {
                    if (event.touches.length === 1) {
                        handlingScroll = true;
                        const deltaY = startY - event.touches[0].pageY;
                        const normalizedDelta = normalizeDelta(deltaY);
                        if(!getAnchorInDirection(normalizedDelta)){
                         handlingScroll = false   
                        }else{
                            document.documentElement.scrollTop += normalizedDelta;
                        }
                    }
                }
            }

            let startY;
            document.addEventListener("touchstart", onTouchStart, {
                passive: false,
            });
            document.addEventListener("touchmove", onTouchMove, {
                passive: false,
            });

            function onGamepadConnected(event) {
                const gamepad = event.gamepad;
                gamepadLoop(gamepad);
            }
            let holdingScrollBar = false
            function gamepadLoop(gamepad) {
                if (!scrolling == true && !handlingScroll == true) {
                    handlingScroll = true;
                    const axes = gamepad.axes;
                    const deltaY = axes[1];
                    if (Math.abs(deltaY) > 0.5) {
                        const normalizedDelta = normalizeDelta(deltaY);
                        if(!getAnchorInDirection(normalizedDelta)){
                         handlingScroll = false   
                        }else{
                            document.documentElement.scrollTop += normalizedDelta;
                        }
                    }
                    requestAnimationFrame(() => gamepadLoop(gamepad));
                }
            }
            

            function clickedOnScrollBar(mouseX){
                console.log("click", window.outerWidth, mouseX)
                if(document.body.clientWidth <= mouseX){
                    return true;
                }
                return false
            }

            document.addEventListener("mousedown",(e) => {
                console.log("down", clickedOnScrollBar(e.clientX), " : ", holdingScrollBar)
                if(clickedOnScrollBar(e.clientX)){
                    holdingScrollBar = true
                }
            })

            document.addEventListener("mouseup",(e) => {
                console.log("up", holdingScrollBar)
                if(holdingScrollBar){
                    scrolling = false;
                    handlingScroll = false;
                    oldScroll = window.scrollY;
                    const anchors = document.querySelectorAll(".scrolling-anchor");
                    const scrollOffset =
                            document.documentElement.scrollTop ||
                            document.body.scrollTop;
                        const windowHeight = window.innerHeight;

                        let nextAnchor = null;
                        let nextAnchorOffset = null;
                        let nextAnchorDistance = null;
                        let anchorOffset = null;
                        let signOfAnchor = null;
                        anchors.forEach((anchor) => {
                            anchorOffset = anchor.offsetTop;

                            let distanceToAnchor = Math.abs(
                                anchorOffset - scrollOffset
                            );
                            if(nextAnchorDistance == null){
                                nextAnchorDistance=distanceToAnchor;
                                signOfAnchor = normalizeDelta(anchorOffset - scrollOffset);

                            }else if(distanceToAnchor<nextAnchorDistance){
                                nextAnchorDistance = distanceToAnchor;
                                signOfAnchor = normalizeDelta(anchorOffset - scrollOffset);
                            }
                            
                        });
                    document.documentElement.scrollTop += signOfAnchor;
                    holdingScrollBar = false;
                }
            })

            window.addEventListener("gamepadconnected", onGamepadConnected);

            const section = document.querySelector(".scroll-section");
            const anchors = document.querySelectorAll(".scrolling-anchor");
            let lastDirection = 0;
            let scrolling = false;
            let cancelScroll = false;

            // Listen for the event.
            section.addEventListener(
                "custom-scroll",
                (e) => {
                    /* … */
                },
                false
            );
            oldScroll = 0;
            document.addEventListener("scroll", (event) => {
                event.preventDefault();
                console.log("son dürümler 1");
                if (scrolling) {
                    const delta = this.oldScroll >= this.scrollY ? -1 : 1;
                    if (lastDirection !== 0 && lastDirection !== delta) {
                        cancelScroll = true;
                        console.log("Cancel Scrolling");
                        console.log(
                            scrolling,
                            delta,
                            this.oldScroll,
                            this.scrollY
                        );
                    }
                    //console.log("Scrolling");
                    return;
                } else {
                    /*var event = new CustomEvent("custom-scroll", {
                        detail: {
                            custom_info: 10,
                            custom_property: 20,
                        },
                    });
                    this.dispatchEvent(event);*/

                    const animF = (now) => {
                        const delta = this.oldScroll > this.scrollY ? -1 : 1;
                        console.log(
                            "scrolling: ",
                            scrolling,
                            ", scroll to: ",
                            delta
                        );
                        //console.log(":", this.oldScroll, this.scrollY);
                        lastDirection = delta;

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

                        let nextAnchor = null;
                        let nextAnchorOffset = null;
                        let anchorOffset = null;
                        anchors.forEach((anchor) => {
                            anchorOffset = anchor.offsetTop;
                            if (
                                (delta > 0 && anchorOffset > scrollOffset) ||
                                (delta < 0 && anchorOffset < scrollOffset)
                            ) {
                                if (
                                    nextAnchor === null ||
                                    Math.abs(anchorOffset - scrollOffset) <
                                        Math.abs(
                                            nextAnchorOffset - scrollOffset
                                        )
                                ) {
                                    nextAnchor = anchor;
                                    nextAnchorOffset = anchorOffset;
                                }
                            }
                        });
                        console.log(nextAnchor);
                        if (nextAnchor !== null) {
                            const distanceToAnchor = Math.abs(
                                nextAnchorOffset - scrollOffset
                            );
                            //console.log(
                            //   nextAnchorOffset,
                            //  scrollOffset,
                            // distanceToAnchor
                            //);
                            const scrollLockDistance = 10; // vh
                            const scrollLockPixels =
                                (windowHeight * scrollLockDistance) / 100;

                            if (distanceToAnchor <= scrollLockPixels) {
                                console.log(
                                    "1",
                                    distanceToAnchor,
                                    scrollLockPixels,
                                    scrollOffset,
                                    "sonuc",
                                    "buldum next anchor",
                                    nextAnchorOffset,
                                    "anchorun offset",
                                    anchorOffset,
                                    "ben burda",
                                    window.scrollY
                                );
                                scrolling = true;
                                scrollLastBit(
                                    nextAnchorOffset,
                                    distanceToAnchor,
                                    true,
                                    delta
                                );
                            } else {
                                const freeScrollValue =
                                    distanceToAnchor - scrollLockPixels;
                                const newScrollOffset =
                                    scrollOffset + delta * freeScrollValue;
                                console.log(
                                    "2",
                                    distanceToAnchor,
                                    scrollLockPixels,
                                    freeScrollValue,
                                    scrollOffset,
                                    "sonuc",
                                    newScrollOffset,
                                    "buldum next anchor",
                                    nextAnchorOffset,
                                    "anchorun offset",
                                    anchorOffset,
                                    "ben burda",
                                    window.scrollY
                                );
                                scrolling = true;
                                scrollToAnchor(
                                    newScrollOffset,
                                    freeScrollValue,
                                    false,
                                    () => {
                                        scrollLastBit(
                                            nextAnchorOffset,
                                            scrollLockPixels,
                                            true,
                                            delta
                                        );
                                    }
                                );
                            }
                        }
                    };
                    requestAnimationFrame(animF);
                }
            });

            function scrollLastBit(offset, distance, braking, direction) {
                console.log("scroll bit anim başladı");
                offset = Math.round(offset);
                distance = Math.round(distance);
                const start = window.pageYOffset;
                const startTime = performance.now();
                //console.log(offset, distance);
                const scrollDuration = braking ? distance * 10 : distance * 2;
                let endTick = false;
                if (offset == window.scrollY) {
                    //console.log("scrolling = false");
                    scrolling = false;
                    handlingScroll = false;
                    oldScroll = window.scrollY;
                    cancelScroll = false;
                    console.log("doğmadan öldüm ben", offset, window.scrollY);
                    return;
                }
                let difference = Math.abs(window.scrollY - offset);
                const tick = (now) => {
                    if(cancelScroll){
                        console.log("animasyon iptal");
                        lastDirection = 0;
                        cancelScroll = false;
                                   

                    }else{
                        console.log("scroll bit anim devam ediyor");
                    console.log(
                        "kilidim: ",
                        scrolling,
                        " tuş kildim",
                        handlingScroll
                    );
                    if (Math.abs(window.scrollY - offset) > difference) {
                        // Baba error diğer tarafa tıklayınca, 1 birim uzaklaşma olduğu için animasyonu bitirip diğer tarafa başlıyor.
                        //scrolling = false;
                        //handlingScroll = false;
                        //oldScroll = window.scrollY;
                        console.log("Baba error, uzaklaştı");
                        difference = Math.abs(window.scrollY - offset);
                        requestAnimationFrame(tick);
                    } else {
                        difference = Math.abs(window.scrollY - offset);
                        console.log(endTick);
                        console.log(
                            offset == window.scrollY,
                            offset,
                            window.scrollY
                        );
                        if (endTick) {
                            //console.log(offset, window.scrollY);
                            if (direction < 0) {
                                if (offset >= window.scrollY) {
                                    //console.log("scrolling = false");
                                    scrolling = false;
                                    handlingScroll = false;
                                    cancelScroll = false;
                                    oldScroll = window.scrollY;
                                    console.log(
                                        "öldüm ben",
                                        offset,
                                        window.scrollY
                                    );
                                } else {
                                    requestAnimationFrame(tick);
                                }
                            } else {
                                if (offset <= window.scrollY) {
                                    //console.log("scrolling = false");
                                    scrolling = false;
                                    handlingScroll = false;
                                    oldScroll = window.scrollY;
                                    console.log(
                                        "öldüm ben",
                                        offset,
                                        window.scrollY
                                    );
                                } else {
                                    requestAnimationFrame(tick);
                                }
                            }
                        } else {
                            const elapsed = now - startTime;
                            const fraction = elapsed / scrollDuration;
                            //console.log(elapsed, fraction);
                            if (fraction < 1) {
                                const easeOut = braking
                                    ? -Math.pow(2, -10 * fraction) + 1
                                    : fraction;
                                window.scrollTo(
                                    0,
                                    start + (offset - start) * easeOut
                                );

                                requestAnimationFrame(tick);
                            } else {
                                window.scrollTo(0, offset);
                                endTick = true;
                                requestAnimationFrame(tick);
                            }
                        }
                    }
                    }
                    
                };
                //console.log("requestAnimationFrame");
                requestAnimationFrame(tick);
            }

            function scrollToAnchor(
                offset,
                distance,
                braking,
                callback = null
            ) {
                if (offset == window.scrollY) {
                    //console.log("scrolling = false");
                    scrolling = false;
                    handlingScroll = false;
                    oldScroll = window.scrollY;
                    cancelScroll = false;
                    console.log("doğmadan öldüm ben", offset, window.scrollY);
                    return;
                }
                console.log("scroll to anchor anim başladı");
                offset = Math.round(offset);
                distance = Math.round(distance);
                const start = window.pageYOffset;
                const startTime = performance.now();
                //console.log(offset, distance);
                const scrollDuration = braking ? distance * 10 : distance * 2;
                let difference = Math.abs(window.scrollY - offset);
                const tick = (now) => {
                    if(cancelScroll){
                        console.log("animasyon iptal");
                        lastDirection = 0;
                        cancelScroll = false;
                         

                    }else{
                        console.log("scroll to anchor anim devam ediyor");
                    console.log(
                        "kilidim: ",
                        scrolling,
                        " tuş kildim",
                        handlingScroll
                    );
                    if (Math.abs(window.scrollY - offset) > difference) {
                        //scrolling = false;
                        //handlingScroll = false;
                        //oldScroll = window.scrollY;
                        console.log("Baba error, uzaklaştı");
                        difference = Math.abs(window.scrollY - offset);
                        requestAnimationFrame(tick);
                    } else {
                        difference = Math.abs(window.scrollY - offset);

                        const elapsed = now - startTime;
                        const fraction = elapsed / scrollDuration;
                        //console.log(elapsed, fraction);
                        if (fraction < 1) {
                            const easeOut = braking
                                ? -Math.pow(2, -10 * fraction) + 1
                                : fraction;
                            window.scrollTo(
                                0,
                                start + (offset - start) * easeOut
                            );

                            requestAnimationFrame(tick);
                        } else {
                            if (callback !== null) callback();
                            window.scrollTo(0, offset);
                        }
                    }
                    }
                    
                };
                //console.log("requestAnimationFrame");
                requestAnimationFrame(tick);
            }
        </script>
    </body>
</html>
"