I want you to proof read my code and tell me about potential bugs and glitches and also mentioning bad practices. Do not give me the correct code, keep explanations simple and short. 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>
            body {
                margin: 0;
            }

            .scroll-section {
                height: 100vh;
                top: 0;
                left: 0;
                right: 0;
            }

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

            .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);
            }
        </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>
            function normalizeDelta(delta) {
                return Math.sign(delta);
            }

            function onMouseWheel(event) {
                if(!scrolling){
                    const normalizedDelta = normalizeDelta(event.deltaY);
                event.preventDefault();
                console.log("bB", normalizedDelta)
                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) {
                if(!scrolling){if (scrollKeys.includes(event.keyCode)) {
                    event.preventDefault();
                    const deltaY =
                        event.keyCode === 38 ||
                        event.keyCode === 107 ||
                        event.keyCode === 36
                            ? -1
                            : 1;
                            document.documentElement.scrollTop +=deltaY;
                }}
                
            }

            document.addEventListener("keydown", onKeyDown);

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

            function onTouchMove(event) {
                if(!scrolling){
                if (event.touches.length === 1) {
                    event.preventDefault();
                    const deltaY = startY - event.touches[0].pageY;
                    const normalizedDelta = normalizeDelta(deltaY);
                    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);
            }

            function gamepadLoop(gamepad) {
                if(!scrolling){
                const axes = gamepad.axes;
                const deltaY = axes[1];
                if (Math.abs(deltaY) > 0.5) {
                    const normalizedDelta = normalizeDelta(deltaY);
                    document.documentElement.scrollTop +=normalizedDelta;
                }
                requestAnimationFrame(() => gamepadLoop(gamepad));}
            }

            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();

                if (scrolling) {
                    const delta = this.oldScroll >= this.scrollY ? -1 : 1;
                    if (lastDirection !== 0 && lastDirection !== delta) {
                        cancelScroll = true;
                        console.log("Cancel Scrolling");
                    }
                    //console.log("Scrolling");
                    return;
                }
                /*var event = new CustomEvent("custom-scroll", {
                        detail: {
                            custom_info: 10,
                            custom_property: 20,
                        },
                    });
                    this.dispatchEvent(event);*/
                scrolling = true;
                console.log("scroll", scrolling);
                console.log(":", this.oldScroll, this.scrollY);
                const delta = this.oldScroll > this.scrollY ? -1 : 1;
                oldScroll = scrollY;
                console.log(delta);
                const animF = (now) => {
                    lastDirection = delta;

                    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 (
                            (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) {
                        const distanceToAnchor = Math.abs(
                            nextAnchorOffset - scrollOffset
                        );
                        console.log(
                            nextAnchorOffset,
                            scrollOffset,
                            distanceToAnchor
                        );
                        const scrollLockDistance = 10; // vh
                        const scrollLockPixels =
                            (windowHeight * scrollLockDistance) / 100;

                        if (distanceToAnchor <= scrollLockPixels) {
                            scrolling = true;
                            scrollLastBit(
                                nextAnchorOffset,
                                distanceToAnchor,
                                true
                            );
                        } else {
                            const freeScrollValue =
                                distanceToAnchor - scrollLockPixels;
                            const newScrollOffset =
                                scrollOffset + delta * freeScrollValue;
                            scrolling = true;
                            scrollToAnchor(
                                newScrollOffset,
                                freeScrollValue,
                                false,
                                () => {
                                    scrollLastBit(
                                        nextAnchorOffset,
                                        scrollLockPixels,
                                        true
                                    );
                                }
                            );
                        }
                    }
                };
                requestAnimationFrame(animF);
            });

            function scrollLastBit(offset, distance, braking) {
                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;
                const tick = (now) => {
                    if (endTick) {
                        console.log("scrolling = false");
                        scrolling = false;
                        oldScroll = window.scrollY;
                        return;
                    }
                    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
            ) {
                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;
                const tick = (now) => {
                    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>
"