Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vuetify & v-virtual-scroll : how can I programmatically scroll an item into view?

I know what my item height is and I know the position of the item in the list, so I should be able to calculate the scroll position. However, I am not sure how to set the scroll position.

like image 372
James Hudson Avatar asked Oct 19 '25 04:10

James Hudson


2 Answers

With Vuetify 2 you can use this.$vuetify.goTo($target, $options) where $target is html element query e.g. '#targetElementId' or HTMLElement object, while all available $options you can find here.

In Vuetify 3, you can use scrollToIndex().

like image 112
maki000 Avatar answered Oct 22 '25 08:10

maki000


For v-virtual-scroll, you can set the scrollTop to scroll an item into view.

You can assign an id to your v-virtual-scroll element for easy selection, then set the scrollTop, like this:

let itemHeight = 48, itemIndex = 10; // set as appropriate
document.getElementById("my-scroller").scrollTop = itemHeight * itemIndex;
like image 34
EricL Avatar answered Oct 22 '25 07:10

EricL



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!