Vue virtual scroll list not showing all list items

[Osman-Rafi]

I'm trying to use vue-virtual-scroll-list component on my app for implementing virtual scroll. However, it's not working as expected. It only showing some data's instead of showing all data with a minimal DOM.

Here is my code:

<virtual-list
      v-show="!!tempItems.length"
      ref="vsl"
      :data-key="'id'"
      :data-sources="tempItems"
      :data-component="childComponent"
      :estimate-size="100"
    />

the child component

<template>
  <div>{{ index }} -> {{ source.message }}</div>
</template>

this only showing the first 30 items.

Codesandbox: https://codesandbox.io/s/practical-cloud-57119?file=/src/App.vue

[baseballyama]

According to the README, you need to add like style="height: 600px; overflow-y: auto;". (You can set height what you want.)

<virtual-list
  v-show="!!tempItems.length"
  ref="vsl"
  :data-key="'id'"
  :data-sources="tempItems"
  :data-component="childComponent"
  :estimate-size="100"
  style="height: 600px; overflow-y: auto;"
/>

[Osman-Rafi]

This creates an extra scrollbar. With scroll newly created scrollbar moves, however, the page scrollbar stays same.

[bLind17]

I have the same problem, looks like https://github.com/tangbc/vue-virtual-scroll-list/issues/345 to me. Not sure if this will be fixed when looking at the timestamp of the issue^^