How to get Vuetify v-table scrollposition?

I'm using a Vuetify v-table component with a lot of data. On certain actions I want to read the current scrollposition of the table ( horizontal and vertical axis ). This is what I've tried so far

Playground

<template>
  <v-table fixed-header height="500px" ref="tableComponent">
    <thead>
      <tr>
        <th v-for="i in 20">
          Col {{ i }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="i in 50" :key="i">
        <td v-for="j in 20" :key="j">
        	<v-btn @click="logScrollPosition">X</v-btn>
        </td>
      </tr>
    </tbody>
  </v-table>
</template>

<script setup>
import { ref } from 'vue'

const data = ref([])
const tableComponent = ref()

function logScrollPosition() {
	const tableElement = tableComponent.value?.$el.querySelector("table"); 
  
  if(!tableElement){
    console.log("table missing");
    return;
  }
  
  console.log(tableElement.scrollLeft);
  console.log(tableElement.scrollTop);
}
</script>

When scrolling and clicking a button the function logScrollPosition always logs 0 for both axis. So my approach seems to be lacking something.

Do you have any ideas how to retrieve the scroll position from tableComponent?

You are trying to obtain the scroll position directly from the table element. However, the scrolling of the table component takes place within the parent container of the table. To determine the scroll position, you should access the parent container of the table instead.

function logScrollPosition() {
  const tableElement = tableComponent.value?.$el.querySelector(".v-table__wrapper");

  if(!tableElement){
    console.log("table missing");
    return;
  }
  console.log(tableElement.scrollLeft);
  console.log(tableElement.scrollTop);
}