How to start from a specific scroll position when using vue js vue-virtual-scroller plugin?

Question

I'm using Akryum/vue-virtual-scroller plugin on different tabs, how can i force vue-virtual-scroll to start from a specific scroll position programatically ?

Answer 1

I found 2 methods scrollToPosition and scrollToItem (not mentioned in the document) which is probably what you are looking for.

You can use scrollToItem on both RecycleScroller and DynamicScroller components.

For scrollToPosition can only use on RecycleScroller but you can get RecycleScroller component by $ref and use it anyway.

Example

Answer 2

You can use the offset or start property : https://github.com/tangbc/vue-virtual-scroll-list#props-type

Answer 3

Use getListenerTarget()

Assuming you are talking about Akryum/vue-virtual-scroller

scrollToPosition and scrollToItem did not work for me so here's an alternative.

Us the getListenerTarget() method to get the dom element and then scroll using the native scrollTop method.

export default {

  methods: {
    scrollIt() {
      let scroller = this.$refs.virtualScroller.getListenerTarget()
      scroller.scrollTop = 200
    }
  }

}

<!-- Options have been left out for brevity -->
<RecycleScroller ref="virtualScroller">
  <!-- ... -->
</RecycleScroller>