Vuetify: [Feature Request] Specify a target element for goTo

[Kelketek]

New Functionality

Currently it is not possible to scroll a full screen dialog, as one might want to do when validating a form before submission. If the goTo function could be handed an element to scroll (as an example) it might be possible to enable it to scroll in this case.

Here's an example where it would be nice if it worked: https://codepen.io/anon/pen/bvGrja

Improvements

Right now one has to find the proper offsets and scroll the particular div they're working with, rather than using goTo, which scrolls the entire document. In the case of a fixed full screen dialog, all elements are currently 'on screen' even when scrolled out of view since they're subelements of the fixed element.

Bugs or Edge Cases it Helps Avoid

The code for determining where and how to scroll can get rather complicated when rolling it on one's own.

[Dylan-Chapman]

Would also appreciate this feature. You can see how vue-scrollto handles this by letting you specify a container, i.e with the directive:

v-scroll-to="{
     el: '#element',
     container: '#container'
 }">

[bschulz87]

With vue-scrollto use content-class to specify a unique class and then target the container: v-scroll-to="{ el: '#target', container: '.my-fancy-content-class' }"

[johnleider]

This is being removed from milestones until @zaken has time to finish

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/pull/5833

[quantumcat1]

If anyone else has trouble with this, using plain JS works: use getElementById and scrollIntoView(). Every single vue way I could find would only scroll the main page behind the dialog, not the dialog itself. But plain JS did the job.

[KaelWD]

this.$vuetify.goTo('selector', { container: 'selector-of-scrollable-element })