Implementing window scrolling to switch between videos using Vue 3 composition API

Question

I am fetching an array of videos from the database and displaying them on the homepage using the index of the videos. Each video is displayed with a height of 100vh, and there is a button with an upward arrow to decrement the video index by 1, as well as a button with a downward arrow to increment the video index by 1. This allows me to switch between the videos based on their index. Now I want to replace the buttons with window scrolling. How can the DOM determine whether I am scrolling down to increment or up to decrement the video index? By the way I am using Vue 3 with composition API

the code is here:

<video
  @click="handleScroll"
  v-if="index === currentVideoIndex"
  loop
  autoplay
  class="video"
  :ref="getVideoRef(index)"
  :data-index="index"
>
  <source class="source" :src="video.url" type="video/mp4" />
</video>

<script setup>:

const currentVideoIndex = ref(0)

const handleScroll = () => {
  currentVideoIndex.value++
  if (currentVideoIndex.value >= videos.value.length) {
    currentVideoIndex.value = 0
  }

  currentVideoId.value = videos.value[currentVideoIndex.value]._id
}