Hello, I want to make my cord work with in a section, when I add: "overflow-y: scroll;" to the ".scroll-section" style, everything breaks and nothing works. That is because my code assumes the page to be full and works like that. However I want my code to work with in scroll-section's scrolling with setting overflow-y to scroll. Can you help me ? 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;
                scroll-snap-type: y mandatory;
                
            }

            .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>
    </body>
</html>
"