How to scroll to the next video on user scroll

i am building a video sharing app with ionic, a lot of videos on the page and each video is occupying almost all the height of the page, what i want to achieve is that when the user scrolls up, it will automatically place the next video at the bottom at video point of the screen and when the user scrolls down, it will automatically place the previous video at viewpoint of the screen.

Here is my code

the video.page.scss
the video.page.html

<div class="DivFyll DivVid" id="deyDiv_{{i}}" *ngFor="let video of videos; let i=index">
    <video class="video" [autoplay]="i==0?true:false" [poster]="service.ApiURL+video.thumbs_path" #player playsinline [id]="i" loop preload="auto">
        <source [src]="service.ApiURL+video.vid_path" type="video/mp4" />
    </video>
</div>

the video.page.scss

ion-content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
    display: block;
    --background-color: transparent !important;
    .DivFyll {
        width: 100%;
        height: 100%;
    }
    .DivVid {
        position: relative;
    }
    video {
        background-color: transparent;
        width: 100%;
        display: block;
        height: 80%;
        object-fit: fill;
        margin-top: auto;
        margin-bottom: auto;
    }
}

Please does anyone knows how i can implement this with javascript or ionic

Source: Angular Questions