Is there a JS event to see if user has scrolled to end of slider?

I’m working on a uni project where I have to make a movie ticket website. A boiled down version of what I have now for the homepage can be seen below. Part of the exercise is to incorporate ajax/fetch into the website, I want to do this the following way:

  1. the user sees 10 movies on the homepage
  2. the user scrolls to the end of this array of movies
  3. ajax or fetch requests 5 more movies from the server
  4. the site now shows 15 movies and the user can scroll on

I’m having trouble with step 2; I need some kind of “reached-end” event triggered from the scrollable flexbox. I did some searching and couldn’t find anything like this. Does anyone perhaps know how this can be done? Any help at all is appreciated!!

class Movie {
  constructor(title, image, description, duration, release, age, schedule, seats) {
    this.title = title;
    this.image = image;
    this.description = description;
    this.duration = duration;
    this.release = release;
    this.age = age;
    this.schedule = schedule; //dictionary met alle tijden per dag.
    this.seats = seats;
  }
}

const blankMovie = new Movie(
  "Blank",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Grey_background.jpg/636px-Grey_background.jpg?20140113173544",
  "blank",
  "0 minutes",
  100
);

var allMovies = [];

for (let i = 0; i < 10; i++) {
  allMovies.push(blankMovie)
}

function populatewith(movies) {
  const homePage = document.getElementById("movie-slider");

  for (let i = 0; i < allMovies.length; i++) {
    const movieDiv = document.createElement("div");
    movieDiv.className = "movie-banner";

    const movieTitle = document.createElement("span");
    movieTitle.className = "movie-banner__title";
    movieTitle.textContent = allMovies[i].title;

    const movieImage = document.createElement("img");
    movieImage.className = "movie-banner__image";
    movieImage.src = allMovies[i].image;

    const movieDur = document.createElement("span");
    movieDur.className = "movie-banner__desc";
    movieDur.textContent = allMovies[i].duration;

    homePage.appendChild(movieDiv);
    movieDiv.appendChild(movieTitle);
    movieDiv.appendChild(movieImage);
    movieDiv.appendChild(movieDur);
  }
}

populatewith(allMovies);
body {
  margin: 0;
  font-family: 'Teko', sans-serif;
}

.float-right {
  float: right;
}

.content {
  transition: margin-top 0.4s;
}

.content {
  background: fixed;
  background-image: url("/images/homepage_background.jpg");
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}

#movie-slider {
  display: flex;
  flex-direction: row;
  align-items: end;
  overflow: auto;
  gap: 10px;
  padding: 10vh 10%;
}

.movie-banner {
  margin-top: 50px;
  margin-bottom: 150px;
  flex-basis: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.movie-banner__image {
  object-fit: cover;
  height: 400px;
}

.movie-banner__title {
  color: wheat;
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 1.5em;
  padding: 10px
}

.movie-banner__desc {
  color: wheat;
  font-size: 1.3em;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Movie Tickets</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/general.css">
</head>

<body>
  <article class="content">
    <section id="movie-slider">
    </section>
  </article>
  <script src="/js/index.js" type="module"></script>
  <script src="/js/general.js" type="module"></script>
</body>

</html>