I have a code where I convert the website in the slide show with animation. However there is a problem. Problem is what if one of the "slides" is not fitting the view. I tried to resize the content so it shrinks to fit  the view height however I couldn't accomplish that. I tried all the stuff with the flex system etc. however in the webpage the fonts are defined  with rem so they do not get smaller when the height gets smaller and I can not change that. 

Anyways, I have given up on the solution of making the section shrink to fit view. I have a new solution which is changing my slide animation system to accommodate slides that are not fitting the view by letting scrolling happen with in the section. 

My system works by preventing input events happening and then calling normalized scrolling in the direction, this is just to trigger scrolling event where, again, the behavior  is shaped to prevent normal scrolling and it will instead animate scrolling until the next anchor element is reached. As you can see there is no check to see if there is more content that is not visible and that could be visible by scrolling, and then enabling scrolling until the whole content is shown.

What I want you to do is, go through my code and make the addition where a check will happen before the scrolling is disabled, before the animation starts playing, it will check if there is more content with in section to show, so it will scroll to the end of anchor section, then if at the edge of anchor section, it will disable scrolling and play the animation.

I am thinking this can be accomplish easily by checking if the current scrolling + anchor section's height is bigger then the bottom of the view. If so that means there are more content to show so the scrolling is enabled. If not the animation can play. However there is a problem, it is that while scrolling what if the next anchors scrolling is passed. So there needs to be another check which will ensure, while free scrolling with in an anhor section, we do not scroll in to the next anchor section. I can not figure out how this can be accomplished, so this is also a part of your task to figrure out a solution.

With these being said your task is explained. Now I will also explain how you will carry out the task. I will be sharing my code with you. You are not to change my code in anyway, especially removing parts. You will only make additions that will make the system that is tasked to you above work. At the end, you will be sending me explanation and only the difference of the code. I mean you are not to send me the whole code, but only the difference as if in a source control system's difference view. For example you can tell me solution's part, where to add it and the code etc. I think you do know how to make a difference of code so I am not explaining that.

At the end if your response and solution does not fit one response due to limitation of communication medium, you can predict this and include a text indicating this "part a of X" where "X" is the predicted total response count and "a" is the current response count to send the whole response. This way you can send me responses bigger than the limit.

Now here is my code, as you can understand I am using astro with preact and tailwind:
"
---
import Compatibility from "~/components/compatibility.astro";
import Features from "~/components/features.astro";
import Footer from "~/components/footer.astro";
import Header from "~/components/header.astro";
import Intro from "~/components/intro.astro";
import Showcase from "~/components/showcase.astro";
import Splash from "~/components/splash.astro";

export interface Props {
    title: string;
    description: string;
    author: string;
    image: URL;
}

import SiteMeta from "../components/SiteMeta.astro";

const { generator, site } = Astro;

const { title, description, image, author } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <title>{title}</title>
        <meta name="generator" content={generator} />

        <meta name="description" content={description} />

        <!-- social media -->
        <meta property="og:title" content="Astro" />
        <meta property="og:type" content="website" />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={image} />
        <meta property="og:url" content={site} />
        <meta name="twitter:card" content="summary_large_image" />
        <SiteMeta
            title={title}
            description={description.substring(0, 100)}
            url={Astro.site
                ? `${Astro.site}/${title.toLowerCase().replaceAll(" ", "-")}`
                : `https://accessible-astro.dev/${title
                      .toLowerCase()
                      .replaceAll(" ", "-")}`}
            image={image}
            author={author}
        />
    </head>
    <body
        class="h-full bg-default text-default text-base selection:bg-secondary selection:text-white"
    >
        <div class="scroll-section header-scroll-ref">
            <Header />
            <section class="scrolling-anchor scrolling-top-anchor flex">
                <Splash />
            </section>

            <section>
                <div class="space-y-24 px-8 pt-32">
                    <section class="scrolling-anchor h-screen flex">
                        <Intro />
                    </section>
                    <section class="scrolling-anchor h-screen flex">
                        <Features />
                    </section>
                    <section class="scrolling-anchor h-screen flex">
                        <Showcase />
                    </section>
                    <section class="scrolling-anchor h-screen flex">
                        <Compatibility />
                    </section>
                </div>
            </section>
        </div>
        <Footer />

        <style>
            .scroll-section {
                height: 100vh;
                width: 100%;
                overflow-y: scroll;
                position: relative;
            }

            .scrolling-anchor {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }

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

            .scroll-section.shake {
                animation: shake 0.5s ease-in-out;
            }

            @keyframes shake {
                0%,
                100% {
                    transform: translateX(0);
                }

                25%,
                75% {
                    transform: translateX(-10px);
                }

                50% {
                    transform: translateX(10px);
                }
            }

            @keyframes float {
                0% {
                    transform: translate3d(0, 0, 0);
                }

                100% {
                    transform: translate3d(0, 30px, 0);
                }
            }
        </style>

        <!-- initialize theme -->
        <script is:inline>
            const themeSaved = localStorage.getItem("theme");

            if (themeSaved) {
                document.documentElement.dataset.theme = themeSaved;
            } else {
                const prefersDark = window.matchMedia(
                    "(prefers-color-scheme: dark)"
                ).matches;
                document.documentElement.dataset.theme = prefersDark
                    ? "dark"
                    : "light";
            }

            window
                .matchMedia("(prefers-color-scheme: dark)")
                .addEventListener("change", (event) => {
                    if (!localStorage.getItem("theme")) {
                        document.documentElement.dataset.theme = event.matches
                            ? "dark"
                            : "light";
                    }
                });
        </script>
        <script>
            /*
setTimeout(() => {
scrollSection.classList.add("shake");
setTimeout(() => {
scrollSection.classList.remove("shake");
}, 500);
}, 1500);*/
            const scrollSection = document.querySelector(".scroll-section");
            const anchors = document.querySelectorAll(".scrolling-anchor");
            if (
                scrollSection !== null &&
                anchors !== undefined &&
                anchors.length > 0
            ) {
                let handlingScroll = false;

                function normalizeDelta(delta: number) {
                    return Math.sign(delta);
                }

                function getClosestAnchorDirection() {
                    const scrollOffset = scrollSection.scrollTop;
                    const windowHeight = scrollSection.clientHeight;

                    let nextAnchorDistance: number | null = null;
                    let anchorOffset: number | null = null;
                    let signOfAnchor: number | null = 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
                            );
                        }
                    });
                    return signOfAnchor;
                }

                function getAnchorInDirection(delta) {
                    const scrollOffset = scrollSection.scrollTop;
                    const windowHeight = scrollSection.clientHeight;

                    let nextAnchor: HTMLElement | null = null;
                    let nextAnchorOffset: number | null = null;
                    let anchorOffset: number | null = 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 nextAnchorOffset;
                }

                function scrollToAnchor(offset: number) {
                    scrollSection.scrollTo(0, offset);
                }

                function onMouseWheel(event) {
                    event.preventDefault();

                    if (!scrolling == true && !handlingScroll == true) {
                        handlingScroll = true;
                        const deltaY = normalizeDelta(event.deltaY);
                        const nextAnchorOffset = getAnchorInDirection(deltaY);

                        if (nextAnchorOffset !== false) {
                            scrollSection.scrollTop += deltaY;
                        } else {
                            handlingScroll = false;
                        }
                    }
                }

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

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

                function onKeyDown(event) {
                    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;
                            const nextAnchorOffset =
                                getAnchorInDirection(deltaY);

                            if (nextAnchorOffset !== false) {
                                scrollSection.scrollTop += deltaY;
                            } else {
                                handlingScroll = false;
                            }
                        }
                    }
                }

                scrollSection.addEventListener("keydown", onKeyDown);
                scrollSection.tabIndex = 0;
                scrollSection.focus();

                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);
                            const nextAnchorOffset =
                                getAnchorInDirection(normalizedDelta);
                            if (nextAnchorOffset !== false) {
                                scrollSection.scrollTop += normalizedDelta;
                            } else {
                                handlingScroll = false;
                            }
                        }
                    }
                }

                let startY;
                scrollSection.addEventListener("touchstart", onTouchStart, {
                    passive: false,
                });
                scrollSection.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);
                            const nextAnchorOffset =
                                getAnchorInDirection(normalizedDelta);
                            if (nextAnchorOffset !== false) {
                                scrollSection.scrollTop += normalizedDelta;
                            } else {
                                handlingScroll = false;
                            }
                        }
                        requestAnimationFrame(() => gamepadLoop(gamepad));
                    }
                }

                function clickedOnScrollBar(mouseX) {
                    if (scrollSection.clientWidth <= mouseX) {
                        return true;
                    }
                    return false;
                }

                scrollSection.addEventListener("mousedown", (e) => {
                    if (clickedOnScrollBar(e.clientX)) {
                        holdingScrollBar = true;
                        cancelScroll = true;
                    }
                });

                scrollSection.addEventListener("mouseup", (e) => {
                    if (holdingScrollBar) {
                        scrolling = false;
                        handlingScroll = false;
                        oldScroll = scrollSection.scrollTop;
                        cancelScroll = false;

                        const normalizedDelta = getClosestAnchorDirection();

                        scrollSection.scrollTop += normalizedDelta;
                        holdingScrollBar = false;
                    }
                });

                scrollSection.addEventListener(
                    "gamepadconnected",
                    onGamepadConnected
                );

                let lastDirection = 0;
                let scrolling = false;
                let cancelScroll = false;

                let oldScroll = 0;
                scrollSection.addEventListener("scroll", (event) => {
                    event.preventDefault();

                    if (scrolling) {
                        const delta =
                            oldScroll >= scrollSection.scrollTop ? -1 : 1;
                        if (lastDirection !== 0 && lastDirection !== delta) {
                            cancelScroll = true;
                        }
                        return;
                    } else {
                        const animF = (now) => {
                            const delta =
                                oldScroll > scrollSection.scrollTop ? -1 : 1;

                            lastDirection = delta;

                            const nextAnchorOffset =
                                getAnchorInDirection(delta);

                            if (nextAnchorOffset !== null) {
                                const scrollOffset = scrollSection.scrollTop;
                                const windowHeight = scrollSection.clientHeight;

                                const distanceToAnchor = Math.abs(
                                    nextAnchorOffset - scrollOffset
                                );

                                const scrollLockDistance = 10; // vh
                                const scrollLockPixels =
                                    (windowHeight * scrollLockDistance) / 100;

                                if (distanceToAnchor <= scrollLockPixels) {
                                    scrolling = true;

                                    scrollLastBit(
                                        nextAnchorOffset,
                                        distanceToAnchor,
                                        true,
                                        delta
                                    );
                                } else {
                                    const freeScrollValue =
                                        distanceToAnchor - scrollLockPixels;
                                    const newScrollOffset =
                                        scrollOffset + delta * freeScrollValue;
                                    scrolling = true;

                                    scrollCloseToAnchor(
                                        newScrollOffset,
                                        freeScrollValue,
                                        false,
                                        () => {
                                            scrollLastBit(
                                                nextAnchorOffset,
                                                scrollLockPixels,
                                                true,
                                                delta
                                            );
                                        }
                                    );
                                }
                            }
                        };
                        requestAnimationFrame(animF);
                    }
                });

                function scrollLastBit(offset, distance, braking, direction) {
                    offset = Math.round(offset);
                    distance = Math.round(distance);
                    const start = scrollSection.scrollTop;
                    const startTime = performance.now();

                    const scrollDuration = braking
                        ? distance * 10
                        : distance * 1;
                    let endTick = false;
                    if (offset == scrollSection.scrollTop) {
                        scrolling = false;
                        handlingScroll = false;
                        oldScroll = scrollSection.scrollTop;
                        cancelScroll = false;

                        return;
                    }
                    let difference = Math.abs(scrollSection.scrollTop - offset);
                    const tick = (now) => {
                        if (cancelScroll) {
                            lastDirection = 0;
                            cancelScroll = false;
                        } else {
                            if (
                                Math.abs(scrollSection.scrollTop - offset) >
                                difference
                            ) {
                                difference = Math.abs(
                                    scrollSection.scrollTop - offset
                                );
                                requestAnimationFrame(tick);
                            } else {
                                difference = Math.abs(
                                    scrollSection.scrollTop - offset
                                );
                                if (endTick) {
                                    if (direction < 0) {
                                        if (offset >= scrollSection.scrollTop) {
                                            scrolling = false;
                                            handlingScroll = false;
                                            cancelScroll = false;
                                            oldScroll = scrollSection.scrollTop;
                                        } else {
                                            requestAnimationFrame(tick);
                                        }
                                    } else {
                                        if (offset <= scrollSection.scrollTop) {
                                            scrolling = false;
                                            handlingScroll = false;
                                            oldScroll = scrollSection.scrollTop;
                                        } else {
                                            requestAnimationFrame(tick);
                                        }
                                    }
                                } else {
                                    const elapsed = now - startTime;
                                    const fraction = elapsed / scrollDuration;

                                    if (fraction < 1) {
                                        const easeOut = braking
                                            ? -Math.pow(2, -10 * fraction) + 1
                                            : fraction;
                                        scrollToAnchor(
                                            start + (offset - start) * easeOut
                                        );

                                        requestAnimationFrame(tick);
                                    } else {
                                        scrollToAnchor(offset);
                                        endTick = true;
                                        requestAnimationFrame(tick);
                                    }
                                }
                            }
                        }
                    };

                    requestAnimationFrame(tick);
                }

                function scrollCloseToAnchor(
                    offset,
                    distance,
                    braking,
                    callback = null
                ) {
                    if (offset == scrollSection.scrollTop) {
                        scrolling = false;
                        handlingScroll = false;
                        oldScroll = scrollSection.scrollTop;
                        cancelScroll = false;

                        return;
                    }

                    offset = Math.round(offset);
                    distance = Math.round(distance);
                    const start = scrollSection.scrollTop;
                    const startTime = performance.now();

                    const scrollDuration = braking
                        ? distance * 10
                        : distance * 1;
                    let difference = Math.abs(scrollSection.scrollTop - offset);
                    const tick = (now) => {
                        if (cancelScroll) {
                            lastDirection = 0;
                            cancelScroll = false;
                        } else {
                            if (
                                Math.abs(scrollSection.scrollTop - offset) >
                                difference
                            ) {
                                difference = Math.abs(
                                    scrollSection.scrollTop - offset
                                );
                                requestAnimationFrame(tick);
                            } else {
                                difference = Math.abs(
                                    scrollSection.scrollTop - offset
                                );

                                const elapsed = now - startTime;
                                const fraction = elapsed / scrollDuration;

                                if (fraction < 1) {
                                    const easeOut = braking
                                        ? -Math.pow(2, -10 * fraction) + 1
                                        : fraction;

                                    scrollToAnchor(
                                        start + (offset - start) * easeOut
                                    );

                                    requestAnimationFrame(tick);
                                } else {
                                    if (callback !== null) callback();
                                    scrollToAnchor(offset);
                                }
                            }
                        }
                    };
                    requestAnimationFrame(tick);
                }
            }
        </script>
    </body>
</html>
"