Javascript scroll event listener not working with overflow:auto

I am attempting to make a splash screen home page where a logo and button are displayed. As the user scrolls or clicks the button, the splash screen will collapse and stick to the top of the page. I have a very rough version of this working.

The issue I am running into is the JS scroll listener is not working when I have overflow:auto set on my parent div of where I place the position:sticky attribute.

Is there any way to get the scroll event listener to work with this setup? It seems I cannot get the collapsing screen to work without setting overflow:auto so as far as I know that is needed. But it also seems I need to take this out for the scroll event to work so I am at a weird crossroads. Any help or ideas would be great!

<html lang="en">
<head>
    <title>Application</title>
      <style>
    .microapp {
        border: 1px solid black;
        margin: 10px;
        box-sizing: border-box;
    }
    
    .applist {
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .microapp:hover {
        background-color: yellow
    }
    
    html, body {
        height: 100%;
        margin: 0px;
    }
    
    .splash {
        height: 100%;
        min-height: 100%;
    }
    
    .root{
        height:100%;
    }
    </head>
      <body>
        <div id="root">
            <div id="scroll" style="height: 100%; overflow: auto; background-color: cornflowerblue;">
                <div><header></div> //header info here
                <div id="splashScreen" class="splash" style="background-color: cornflowerblue; position: sticky; height: 100%; top: -70%; align-items: center; justify-content: center;">
                    <div class="splash=inner" style="position: sticky; top: 0px; margin-top: 10%;">
                        <img src="./placeholder..png" style="height: 350px; display: block; margin-left: auto; margin-right: auto; position: sticky; top: 0px;">
                        <button type="button" class="myButton" style="display: block; margin-left: auto; margin-right: auto; color: white; margin-top: 10%;">Get Started</button>
                    </div>
                </div?
                <div id="applist" class="applist" style="height: 1500px; background-color: white;">
                    <div class="microapp".....>Micro App </div>
                    <div class="microapp".....>Micro App </div>
                    <div class="microapp".....>Micro App </div>
                </div>
            </div>
        </div>
    </body></html>

splash screen collapsed splash screen