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 style 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. So currently it works perfectly but the scrolling happens in the document however the div with: " <div class="last">
            
        </div>" is not visible, to make it visible the .scroll-section gets overflow-y set to scroll so things get aligned correctly. My main purpose here is to being able to create sections outside the scroll animation region. All functions need to be edited. 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>
"