JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroller/dist/vue-virtual-scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-virtual-scroller/dist/vue-virtual-scroller.css">
<div id='app'>

  <button @click='$refs.scroller.$refs.scroller.scrollToPosition(1000)'>Go to 1000px</button>
  <button @click='$refs.scroller.scrollToItem(999)'>Go to item 999</button>
  
  <div class='wrapper'>
    <dynamic-scroller class='scroller'
      ref='scroller'
      :items='items'
      :min-item-size='54'>
      <template v-slot='{ item, index, active }'>
        <dynamic-scroller-item
          :item='item'
          :active='active'
          :size-dependencies='[
            item.message
          ]'
          :data-index='index'>
          <div class='message'>{{ item.message }}</div>
        </dynamic-scroller-item>
      </template>
    </dynamic-scroller>

  </div>
</div>

CSS

.wrapper {
  border: 1px solid grey;
  height: 500px;
  overflow: hidden;
}

.scroller {
  height: 100%;
}

.message {
  padding: 12px;
}

JavaScript

Vue.component('dynamic-scroller', VueVirtualScroller.DynamicScroller)
Vue.component('dynamic-scroller-item', VueVirtualScroller.DynamicScrollerItem)

new Vue({
  data: () => ({
    items: []
  }),
  created() {
    for (let i = 0; i < 2000; i += 1) {
      this.items.push({
        id: i,
        message: `Text ${i}`
      })
    }
  }
}).$mount('#app')