我正在使用一个Vuetify v-table组件，其中包含大量数据。在某些操作中，我想读取表的当前滚动位置（水平轴和垂直轴）。这是我目前为止所尝试的
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>

滚动并单击按钮时，函数logScrollPosition始终记录两个轴的0。我的方法似乎缺少了一些东西。
你有任何想法如何检索滚动位置从tableComponent？