How to catch scrolling event on v-data-table component?

Is there a way to catch scrolling event on v-data-table component of Vuetify frmework?

I mean the case when table has a fixed height so the table body will scroll.

<v-data-table
  fixed-header
  :height=400
  :headers="headers"
  :items="desserts"
  item-key="name"
  disable-pagination
  hide-default-footer
></v-data-table>

https://codepen.io/Zurab-D/pen/yLXOyRJ

All you have to do is target the table DOM element after the Vue mounts. Just use "this" and go from there...check out the mounted hook below.

<template lang="html">
  <div class="graph-content">
    <v-data-table v-show="topArtistUplifts.length" id="topUpliftTable" class="data-table-custom"
      :headers="tableHeaders" :items="topArtistUplifts" fixed-header :height="tableHeight"
      :items-per-page="-1" hide-default-footer :mobile-breakpoint="0">

      <template v-slot:item.artist_name="{ item }">
        <span>
          <router-link :to="{ name: 'Artist', query: { artistId: item.artist_id, ...linkQuery }}"
            class="artist-link inline">
              {{ item.artist_name }}
          </router-link>
        </span>
      </template>
      <template v-slot:item.absolute_number="{ item }">
        <span>+{{ getAbbreviatedNum(item.absolute_number) }}</span>
      </template>
      <template v-slot:item.relative_number="{ item }">
        <span :class="percentChangeStyle(item.relative_number * 100)">{{ percentChangeFormat((item.relative_number * 100).toFixed(2)) }}</span>
      </template>
    </v-data-table>
    <div class="no-notifs full-height" v-show="!topArtistUplifts.length">
      No uplift to report yet – please check back soon.
    </div>
    <Loader v-if="updating.topArtistUplifts" :height="50"/>
  </div>
</template>

<script>
methods: {
  handleUpliftScroll(e) {
    console.log('yoooo i'm a table scroll event: ', e)
  },
},
mounted() {
  const tableWrapper = this.$el.children[0].children[0]
  tableWrapper.addEventListener('scroll', this.handleUpliftScroll)
}
</script>