Is there a way to make something scroll when the users mouse is not in the scroll area

Ok, so this is a pretty tricky question. How can you make something scroll when the users mouse isn’t in the scroll area? An great example is from apple’s [IPad Mini page.][1] At the very front, you can scroll the text while your mouse isn’t at the scroll area at the top. I want to do something like this in my webpage. Here is my code:

#scroll-text-vr {
    color:white;
    text-align: center;
    font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
    font-size: 50px;
    overflow-y: scroll;
    height:10vh;
    background-color: black;
    padding-top: -200px;
    margin: 0px;
    line-height: 5px;
}
.vr-text-scroll {
    padding-top:90px;
}
#vr-image-scroll {
    height:90vh;
    width:100vw;
    object-fit: contain;
    background-color: black;
}
#vr-animation {
    position: sticky;
    top: 0;
    height:100vh;
    width:100vw;
}
#vr-animation-scroller {
    height:300vh;
    width:100vw;
    background-color: black;
    position: relative;
}
#content {
 height:1000vh;
 }

 <div id="vr-animation-scroller">
    <div id=vr-animation>
    <div id="scroll-text-vr">
        <p>Experience It.</p>
        <p class="vr-text-scroll">Immerse in It.</p>
        <p class="vr-text-scroll">Push the Gas.</p>
        <p class="vr-text-scroll">Turn the Wheel</p>
        <p class="vr-text-scroll">Fly the plane.</p>
        <p class="vr-text-scroll">You Know It.</p>
        <p class="vr-text-scroll">You Love It.</p>
        <p class="vr-text-scroll">It's VR</p>
    </div>
    <img id="vr-image-scroll" src="vrimage.jpg"/>
</div>
</div>
<div id="content">
<p>some more content...</p>
</div>

Also, make sure to look at the snippet in fullscreen.

Thanks for any help you can provide.
[1]: https://www.apple.com/ipad-mini/