[Bug Report][3.5.7] goTo results in warning when specified element is on the bottom of a page

[dirkbolte]

Environment

Vuetify Version: 3.5.7
Vue Version: 3.4.21
Browsers: Safari 17.1.2, Google Chrome
OS: Mac OS 10.15.7

Steps to reproduce

When using goTo and specifying an element which is on the bottom of a page (or close to it), Vuetify prints a warning: [Vue warn]: Vuetify: Scroll target is not reachable

The behavior is fine if view can scrolled so that the specified element ends up on the top of the page. For any item which is closer to the bottom, an error is thrown.

Small reproduction code:

<template>
  <v-app>
    <v-container class="overflow-y-auto">
      <div v-for="i in [...Array(400).keys()]" :class="`index-${i}`">test</div>
    </v-container>
  </v-app>
</template>

<script setup>
  import { nextTick } from 'vue'
  import { onMounted } from 'vue'
  import { ref } from 'vue'
  import { useGoTo } from 'vuetify'

  const goto = useGoTo()

  onMounted(async () => {
    nextTick()
    goto('.index-399')
  })
</script>

Expected Behavior

Scrolling takes place and no warning is created.

Actual Behavior

View is scrolled but a warning is created.

Reproduction Link

https://play.vuetifyjs.com/#...

[DumbergerL]

I have the same issue. Is there a workaround or solution yet?

[dirkbolte]

I haven't found any workaround, so unfortunately as of now, we ignore the warning logs.

[KaelWD]

Fixed by #17286